Xây dựng website bán sản phẩm thân thiện môi trường bằng nodejs

Xây dựng website bán sản phẩm thân thiện môi trường bằng nodejs Xây dựng website bán sản phẩm thân thiện môi trường bằng nodejs Xây dựng website bán sản phẩm thân thiện môi trường bằng nodejs Xây dựng website bán sản phẩm thân thiện môi trường bằng nodejs Xây dựng website bán sản phẩm thân thiện môi trường bằng nodejs Xây dựng website bán sản phẩm thân thiện môi trường bằng nodejs

PHẦN MỞ ĐẦU

TÍNH CẤP THIẾT ĐỀ TÀI

Hiện nay, môi trường sống có tầm ảnh hưởng sâu sắc đến mọi mặt của cuộc sống và sự phát triển của xã hội Dù công việc và công nghệ có ngày đổi mới, tiến bộ từng ngày, môi trường sống vẫn ngày càng xuống cấp và đe dọa sức khỏe, chất lượng sống cũng như tương lai của chúng ta Sự xuống cấp ấy cho thấy nguy cơ chúng ta vô tình hủy hoại chính cuộc sống mà mình đang xây dựng.

Trong khi công nghệ ngày càng phát triển, môi trường sống lại chưa được quan tâm đúng mức, dù nó là nền tảng cho mọi hoạt động học tập và làm việc Chúng tôi ra mắt một trang web chuyên bán các sản phẩm thân thiện với môi trường đồng thời cập nhật tin tức mới nhất về môi trường sống quanh ta, nhằm kết nối xu hướng công nghệ với nhận thức về bảo vệ môi trường Trang web không chỉ cung cấp lựa chọn sản phẩm xanh mà còn giúp người dùng nắm bắt thông tin nhanh chóng và nâng cao ý thức về tác động của hành vi hàng ngày lên môi trường Với sự cập nhật liên tục và nội dung được tối ưu cho SEO, chúng tôi mong người đọc sẽ dễ dàng tiếp cận thông tin hữu ích và lựa chọn những sản phẩm thân thiện với môi trường.

Hãy dùng sản phẩm thân thiện với môi trường hàng ngày để chăm sóc môi trường sống và thể hiện tình yêu với thiên nhiên Khi hiểu và yêu môi trường, chúng ta sẽ có các lựa chọn sống xanh và lan tỏa thông điệp bảo vệ đến cộng đồng Để đáp ứng nhanh mọi yêu cầu của khách hàng và truyền tải thông tin về môi trường một cách hiệu quả, cần có một trang web về môi trường được tối ưu cho SEO, dễ tiếp cận và cung cấp nội dung đáng tin cậy, giúp người dùng không phải chờ đợi quá lâu.

MỤC TIÊU CỦA ĐỀ TÀI

 Tìm hiểu các công nghệ liên quan đến đề tài như:

+ Tìm hiểu kỹ thuật NodeJS

+ Tìm hiểu chứng thực PassportJS và JWT

+ Tìm hiểu về thời gian thực Socket.io

 Xây dựng website tìm bán sản phẩm có các chức năng cơ bản: o Đăng ký/Đăng nhập/Đăng xuất

Trang web cho phép đăng nhập nhanh bằng Google/Facebook, quản lý tài khoản (xem/cập nhật thông tin), tìm kiếm sản phẩm có sẵn và nhận thông báo khi không tìm thấy sản phẩm, xem chi tiết sản phẩm và tin tức môi trường, chat online với tương tác giữa người dùng và quản trị viên trang web, xem giỏ hàng, tạo và chỉnh sửa sản phẩm trên website, tạo và chỉnh sửa tin tức trên website, cập nhật sản phẩm và tin tức, quản lý tin tức và quản lý sản phẩm, thống kê, đánh giá sản phẩm, đặt hàng và quản lý bán hàng, và lọc sản phẩm theo giá hoặc tên sản phẩm.

CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU

 Công nghệ Express, NodeJS, MongoDb Atlas

 Các thư viện hỗ trợ: o EJS

 Lĩnh vực mà website phát triển: Bán sản phẩm thân thiện với môi trường

 Mô hình triển khai: Mô hình MVC

 Phạm vi nghiên cứu hướng đến các mô hình mua bán sản phẩm thân thiện với môi trường

KHÓA LUẬN TỐT NGHIỆP – CÔNG NGHỆ THÔNG TIN

KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC

 Nghiên cứu hiểu rõ các thành phần cơ bản của công nghệ như: Express, NodeJS, Mongodb Atlas

 Tìm hiểu ngôn ngữ: Javascript

 Sử dụng công nghệ xây dựng thành công website bán các sản phẩm thân thiện với môi trường

Chúng tôi phát triển đầy đủ các chức năng cho người dùng cuối, bao gồm đăng ký và đăng nhập bằng email hoặc đăng nhập bằng Google/Facebook, quản lý tài khoản, xem danh mục sản phẩm và tìm kiếm sản phẩm hiệu quả Hệ thống còn cho phép lọc sản phẩm theo giá, xem chi tiết sản phẩm và xem tin tức liên quan, giúp người dùng nắm bắt thông tin và mua hàng dễ dàng.

 Phát triển đầy đủ các tính năng cho quản trị viên: quản lý sản phẩm, quản lý tin tức, quản lý thông tin khách hàng, nhân viên

 Phát triển các chức năng quản trị cho website như: quản lý người dùng, quản lý sản phẩm, tin tức, thống kê, báo cáo

CƠ SỞ LÝ THUYẾT

TÌM HIỂU CÔNG NGHỆ

JavaScript là một ngôn ngữ lập trình đa nền tảng, đồng thời là một ngôn ngữ kịch bản hướng đối tượng được thiết kế nhỏ gọn và nhẹ Khi hoạt động bên trong một môi trường host, JavaScript có thể kết nối tới các object của môi trường đó và cung cấp các cách quản lý chúng, giúp phát triển ứng dụng linh hoạt và tương tác trên nhiều nền tảng.

JavaScript cung cấp các thư viện tiêu chuẩn chứa các đối tượng như Array, Date và Math, cùng với các yếu tố cốt lõi của ngôn ngữ như toán tử, cấu trúc điều khiển và câu lệnh Ngoài ra, JavaScript có thể được mở rộng cho nhiều mục đích bằng cách bổ sung thêm các đối tượng Ví dụ, JavaScript phía khách (client-side) mở rộng bằng cách cung cấp các đối tượng để quản lý trình duyệt và Document Object Model (DOM), cho phép một ứng dụng tác động tới các yếu tố trên trang HTML và phản hồi lại các hành động của người dùng như click chuột, nhập form và chuyển trang Bên cạnh đó, JavaScript phía máy chủ (server-side) được mở rộng bằng các đối tượng cần thiết để chạy trên máy chủ, cho phép ứng dụng kết nối với cơ sở dữ liệu, trao đổi thông tin liên tục giữa các phần của ứng dụng và thao tác với các tập tin trên máy chủ.

JavaScript is standardized by Ecma International, the European association for standardizing information and communication systems ECMA, formerly known as the European Computer Manufacturers Association, provides an international open standard for the JavaScript programming language The standardized form of JavaScript is called ECMAScript, and it functions as a universal standard that ensures compatibility across applications and environments that support the language.

Các công ty có thể tận dụng tiêu chuẩn ngôn ngữ mở để phát triển các triển khai JavaScript riêng cho họ Tiêu chuẩn ECMAScript được mô tả trong tài liệu thuộc ECMA-262 (ECMA-262 specification) Xem mục New in JavaScript để nắm bắt sự khác biệt giữa các phiên bản JavaScript và các edition của ECMAScript.

ECMA-262, the standard for ECMAScript, has been approved by ISO (International Organization for Standardization) as ISO 16262, and you can find the official specification on the Ecma International website Note that ECMAScript does not include descriptions for the Document Object Model (DOM); the DOM is standardized separately by the World Wide Web Consortium (W3C).

 DOM định nghĩa cách mà các đối tượng trong HTML tiếp xúc với các đoạn script của bạn Để có được một cảm nhận tốt hơn về các công nghệ khác nhau được sử dụng khi lập trình với JavaScript, hãy tham khảo bài viết tổng quan về công nghệ JavaScript [1]

 Node.js là một mã nguồn mở, một môi trường cho các máy chủ và ứng dụng mạng Node.js sử dụng Google V8 JavaScript engine để thực thi mã, và một tỷ lệ lớn các mô-đun cơ bản được viết bằng JavaScript

Node.js tích hợp sẵn một thư viện built-in cho phép các ứng dụng hoạt động như một web server mà không cần cài đặt hay vận hành các phần mềm phụ trợ như Nginx, Apache HTTP Server hoặc IIS Điều này giúp các nhà phát triển triển khai API và dịch vụ web trực tiếp trong ứng dụng Node.js, đồng thời giảm sự phụ thuộc vào hạ tầng máy chủ bên ngoài Với khả năng máy chủ HTTP tích hợp, bạn có thể kiểm soát luồng request và response một cách linh hoạt, tối ưu hóa quy trình triển khai và rút ngắn thời gian đưa sản phẩm ra thị trường cho các dự án từ nhỏ đến vừa.

Node.js cung cấp kiến trúc hướng sự kiện (event-driven) và I/O không chặn (non-blocking), tối ưu hóa thông lượng và khả năng mở rộng của ứng dụng Mọi hàm trong Node.js là bất đồng bộ (asynchronous), cho phép các tác vụ được xử lý ở chế độ nền Nhờ cơ chế này, Node.js có thể xử lý đồng thời nhiều yêu cầu với hiệu suất cao, phù hợp cho các ứng dụng mạng và server-side.

Node.js phù hợp với các sản phẩm có lượng truy cập lớn, đòi hỏi khả năng mở rộng nhanh và thích ứng với công nghệ mới Khi cần đổi mới công nghệ hoặc áp dụng các giải pháp tối ưu để cải thiện hiệu suất, Node.js mang lại nền tảng mạnh mẽ, linh hoạt và khả năng triển khai nhanh chóng Đối với các dự án Startup, Node.js là lựa chọn tối ưu để đưa sản phẩm ra thị trường nhanh hơn và duy trì tốc độ tăng trưởng cao Việc áp dụng Node.js giúp hệ thống xử lý lưu lượng cao một cách ổn định, đồng thời tối ưu quy trình phát triển và thời gian ra mắt sản phẩm.

1.2.2 Những ứng dụng sử dụng NodeJS

 Xây dựng websocket server (Chat server)

 Hệ thống Notification (Giống như facebook hay Twitter)

 Ứng dụng upload file trên client

 Các máy chủ quảng cáo

 Các ứng dụng dữ liệu thời gian thực khác

1.2.3 Ưu và nhược điểm NodeJS

Node.js nổi bật với khả năng nhận và xử lý nhiều kết nối chỉ với một single-thread, giúp hệ thống tiết kiệm RAM và hoạt động nhanh hơn so với mô hình phải tạo thread cho mỗi truy vấn như PHP Nhờ ưu điểm non-blocking I/O của JavaScript, Node.js tận dụng tối đa tài nguyên của máy chủ mà không gây ra độ trễ như PHP, mang lại hiệu suất cao cho các ứng dụng web đòi hỏi xử lý đồng thời và khả năng mở rộng tốt.

JSON APIs, with an event-driven architecture and non-blocking I/O, combined with JavaScript, are an excellent choice for JSON-based Web services This approach delivers scalable, high-performance APIs that remain responsive under concurrent loads, making it ideal for modern web applications that rely on lightweight data exchange through JSON.

Single Page Application (SPA) là kiểu ứng dụng web hiển thị trên một trang duy nhất, mang lại trải nghiệm mượt mà như Gmail Nếu bạn dự định phát triển một ứng dụng thể hiện trên một trang, Node.js là lựa chọn phù hợp nhờ khả năng xử lý đồng thời nhiều request mỗi giây và thời gian phản hồi nhanh, giúp tăng hiệu suất và khả năng mở rộng cho ứng dụng web của bạn.

Đối với các ứng dụng web hiện đại, tốc độ tải trang và khả năng xử lý nhiều yêu cầu đồng thời là yếu tố quyết định để người dùng cảm thấy chuyên nghiệp và hài lòng Các ứng dụng không muốn người dùng phải tải lại trang nên cần một nền tảng có hiệu suất cao Node.js với mô hình xử lý bất đồng bộ có thể xử lý hàng nghìn yêu cầu từ người dùng cùng lúc một cách nhanh chóng, mang lại trải nghiệm mượt mà và tối ưu hóa hiệu suất cho dự án của bạn Chọn Node.js là chiến lược hiệu quả để thể hiện sự chuyên nghiệp và đáp ứng kỳ vọng về tốc độ cho các ứng dụng của bạn.

Unix-based shelling tools using Node.js take full advantage of Unix to run at peak efficiency In essence, Node.js can manage thousands of processes and operate with a single-threaded event loop, driving performance to its maximum and delivering outstanding results.

TÌM HIỂU MÔ HÌNH MVC TRONG XÂY DỰNG WEBSITE

2.1 Tìm hiểu mô hình MVC

MVC, viết tắt của Model – View – Controller, là một mẫu thiết kế nhằm mục tiêu tách biệt phần giao diện người dùng và logic xử lý code, từ đó dễ quản lý, phát triển và bảo trì ứng dụng Theo mô hình MVC, Model quản lý dữ liệu và quy tắc nghiệp vụ, View trình bày dữ liệu cho người dùng, còn Controller nhận input và điều phối luồng xử lý giữa Model và View, giúp tăng tính tái sử dụng, mở rộng hệ thống và cải thiện trải nghiệm người dùng.

Mô hình MVC gồm ba thành phần chính: Model xử lý việc tương tác và truy vấn dữ liệu từ cơ sở dữ liệu, View là giao diện người dùng hiển thị dữ liệu và ở Java web thường được triển khai dưới dạng file JSP, còn Controller đảm nhiệm việc điều phối giữa Model và View cũng như xử lý logic nghiệp vụ; trong Java web, Controller thường được triển khai dưới dạng servlet.

Trong mô hình MVC, khi người dùng truy cập một URL, một yêu cầu (request) được gửi đến controller Controller nhận yêu cầu và chuyển nó tới Model Model sẽ tương tác với cơ sở dữ liệu để truy xuất dữ liệu cần thiết, và sau khi lấy được dữ liệu đúng, nó trả dữ liệu về cho controller Cuối cùng, controller gửi phản hồi phù hợp đến người dùng.

Trong kiến trúc MVC, Controller xử lý nghiệp vụ và logic kinh doanh, sau đó gửi dữ liệu kết quả về cho View để trình bày View đảm nhận việc hiển thị thông tin một cách chính xác, phản ánh đúng kết quả người dùng yêu cầu.

2.2 Chi tiết từng lớp mô hình MVC

Đây là phần xử lý truy vấn cơ sở dữ liệu và kiểm tra logic, gồm ba thành phần chính: BO (Business Object), DAO (Data Access Object) và Java Bean BO đảm nhận xử lý logic nghiệp vụ và đóng vai trò trung gian giữa Controller và DAO; các lớp khác muốn giao tiếp với cơ sở dữ liệu phải thông qua lớp trung gian này để đảm bảo luồng dữ liệu được kiểm soát và nhất quán DAO chịu trách nhiệm thực hiện các thao tác truy vấn và cập nhật dữ liệu trên cơ sở dữ liệu, đồng thời tách biệt logic nghiệp vụ với các thao tác dữ liệu Java Bean là các đối tượng dữ liệu (POJO) dùng để chứa và chuyển dữ liệu giữa các lớp, giúp dễ bảo trì và tối ưu hoá sự luân chuyển dữ liệu Việc phân tách rõ ràng giữa BO, DAO và Java Bean giúp tăng hiệu suất, dễ mở rộng và cải thiện chất lượng mã nguồn cho hệ thống.

Trong kiến trúc ứng dụng, hai thành phần chính là DAO và Java Bean DAO (Data Access Object) là lớp làm việc trực tiếp với cơ sở dữ liệu, có chức năng truy vấn và thao tác dữ liệu; việc giao tiếp với cơ sở dữ liệu chỉ xuất hiện ở lớp DAO, các lớp khác muốn truy cập dữ liệu phải thông qua DAO để đảm bảo tách biệt giữa tầng xử lý dữ liệu và các tầng ứng dụng Java Bean là các lớp Java được thiết kế để mô phỏng dữ liệu, đại diện cho các đối tượng kinh doanh và dùng làm mô hình dữ liệu cho quá trình lưu trữ và truyền dữ liệu giữa các tầng, hỗ trợ cho việc tích hợp với DAO trong ứng dụng.

Một cấu trúc dữ liệu trong csdl gồm các getter và setter, được ví như mạch máu của ứng dụng vì nó xuất hiện ở cả ba thành phần Model, Controller và View, giúp các thành phần của MVC giao tiếp với nhau JavaBean không cần biết đến sự tồn tại của bất kỳ lớp nào khác, nó chỉ đơn thuần là một class thuần Java.

 Mô hình hoạt động của DAO, BO và java bean:

Hình 2-Mô hình hoạt động của DAO, BO và JAVA BEAN [6]

Phần này quy định cách thiết kế giao diện người dùng và tối ưu tương tác với người dùng thông qua HTML và JavaScript; để tạo trang web động, ta sử dụng JSP thay cho HTML thuần nhằm hiển thị dữ liệu động một cách linh hoạt Các views được Controller điều hướng theo mô hình MVC và chỉ biết tới sự tồn tại của JavaBean, giúp tách biệt giữa giao diện người dùng và logic xử lý phía sau.

Controller có nhiệm vụ điều phối tương tác giữa Model và View và xử lý logic nghiệp vụ của ứng dụng Trong mô hình MVC, Controller đóng vai trò trung gian nhận dữ liệu từ Model, áp dụng các quy tắc nghiệp vụ và truyền kết quả đến View để hiển thị cho người dùng Trong Java, controller lấy dữ liệu từ Model và sau đó gửi về View, giúp tách biệt rõ ràng giữa xử lý dữ liệu và giao diện người dùng nhằm tối ưu khả năng bảo trì, mở rộng và SEO cho nội dung hiển thị.

2.3 Ưu - Nhược điểm mô hình MVC

Theo quan điểm của tôi, MVC là một mô hình lập trình web mang tính chất chuyên nghiệp vì có tính logic cao nhưng vẫn đơn giản, giúp phân tách rõ ràng các chức năng của một ứng dụng Nhờ sự phân tách này, nhiều người có thể làm chung dự án, dễ phát hiện và sửa lỗi, dễ nâng cấp tính năng và bảo trì cũng thuận tiện hơn.

 MVC khi dùng trong các project nhỏ sẽ gây phức tạp vấn đề cần giải quyết

Dẫu cho MVC tỏ ra lợi thế vượt trội so với cách lập trình thông thường, mô hình này vẫn phải nạp và tải nhiều thư viện đồ sộ để xử lý dữ liệu Chính sự phụ thuộc vào các thư viện này khiến hệ thống trở nên chậm chạp hơn so với việc code tay thuần túy Do đó, khi cân nhắc giữa lợi ích về cấu trúc, quản lý mã nguồn và tái sử dụng của MVC với yêu cầu hiệu suất cao, người phát triển cần đánh đổi cẩn trọng và xem xét tối ưu hoá hoặc đơn giản hóa để đạt được hiệu năng tốt nhất.

MVC đòi hỏi người tiếp cận phải nắm vững OOP và có kinh nghiệm tương đối để thiết kế và xây dựng một ứng dụng hoàn chỉnh Khi MVC coi mảng là thành phần chính cho việc truy xuất dữ liệu, sẽ gặp nhiều khó khăn, đặc biệt khi áp dụng Active Record để phát triển ứng dụng Người làm dự án cần nắm vững mô hình mảng đa chiều để quản lý dữ liệu và tối ưu hóa truy vấn trong kiến trúc MVC Sự hiểu biết sâu về cấu trúc Model – View – Controller giúp xây dựng hệ thống dễ bảo trì, mở rộng và đạt hiệu quả cao khi làm việc với Active Record trong môi trường dữ liệu phức tạp.

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

KHẢO SÁT HIỆN TRẠNG

1.1 Nhận xét một số website về môi trường

Hình 3-Hình ảnh trang giao diện trang chủ (admin, user )

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

Hình 8-Form đăng nhập 1.1.1.2 Ưu điểm

- Gam màu: xanh, trắng, xám chủ đạo hợp với đề tài môi trường, nhẹ nhàng

- Hiệu ứng: slide ảnh nhiều, khá hợp

- Bố cục sắp xếp: header, footer, thanh menu, nội dung khá đầy đủ

- Dữ liệu sản phẩm: nhiều loại khác nhau

- Có logo, popup quản cáo

- Tích hợp diễn đàn tin tức và bán hàng khá hay

- Đăng kí rất kĩ qua mail đảm bảo an toàn và tin cậy về thông tin khách hàng

- Thiết kế form đăng bài khá hay

- Không đăng nhập được với tài khoản facebook dù để đăng kí nhanh

- Slide chưa được linh hoạt

- Khá nhiều chữ, bố trí hơi khó nhìn ở phần diễn đàn và các mục liên quan

- Mua trực tiếp qua số điện thoại hoặc địa chỉ Không hỗ trợ giỏ hàng gây khó cho người dùng

- Tích hợp nhiều thông tin hấp dẫn kèm với ảnh minh họa

- Bố cục sắp xếp rõ ràng: header, footer, body

- Bố cục giống, không có hỗ trợ nhiều chức năng cho người dùng

- Chỉ cung cấp thông tin, không linh hoạt

- Không có mục đăng kí hay đăng nhập

Hình 13-Trang Recycle week campaign

Hình 14-Trang chi tiết cho 1 thông tin

- Nhiều thông tin hữu ích về môi trường

- Nhiều mục ẩn sau mỗi phân trang

- Chủ yếu là tin tức

- Cách bố trí có sự trùng lập, không linh hoạt

- Không tương tác nhiều, không có đăng kí tài khoản

- Không tích hợp app mobile

Hình 18-Trang enviroment & you 1.1.4.2 Ưu điểm

- Dữ liệu: Nhiều nội dung hay, hấp dẫn

- Bố cục đầy đủ: header, footer, body

- Nội dung phân bố hơi rối

- Có sự trùng lập, nhằm chán

- Không có tài khoản, hỗ trợ, app mobile

Hình 22-Trang đăng kí 1.1.5.2 Ưu điểm

- Gam màu: trắng đen nổi bật

- Bố cụ đầy đủ: header, footer, body, quảng cáo

- Có chức năng đăng kí

- Không đăng kí nhanh được qua facebook mặc dù để

- Nội dung phân bố hơi rối

1.2 Tổng hợp, đánh giá chung các websites về môi trường

- Dữ liệu sản phẩm; Nhiều thông tin hay về môi trường

- Có bố cụ rõ ràng: logo, header, footer, thanh menu, body

- Hiệu ứng: slide ảnh, video bắt mắt

- Mỗi trang có những chức năng riêng biệt, đa phần còn hạn chế

- Các trang chủ yếu về tin tức nhiều, chưa thu hút người dùng

1.3 Tổng kết - Rút ra trang web mong muốn

- Logo rõ ràng, phù hợp

- Bố cục đầy đủ, sắp xếp tốt

- Nội dung thực tế, cập nhập mới nhất, hay nhất

- Hiệu ứng: slide ảnh, video phù hợp, nhanh chống

- Gam màu: xanh dương, trắng

- Phối hợp tin tức và bán hàng

- Tổ chức màn hình trang tương tác tin tức tốt, nhanh chống

- Khách hàng có thể đăng kí để theo dõi, like, share, comment những thông tin môi trường mới nhất đến mọi người Hỗ trợ tương tác khách hàng

- Đăng kí tài khoản qua mail hoặc facebook được

- Trang bán hàng đầy đủ nhất: có giỏ hàng, đóng góp ý kiến, giới thiệu sản phẩm mới từ khách hàng, thêm, xóa, sửa, theo dõi đơn hàng, khách hàng

XÁC ĐỊNH YÊU CẦU

 Đối với người dùng khách

 Lọc sản phẩm theo các tiêu chí (Giá, Tên sản phẩm)

 Xem chi tiết sản phẩm

 Xem chi tiết tin tức, thêm tin

 Thêm, xem, sửa, xóa giỏ hàng

 Đối với người dùng thành viên

 Lọc sản phẩm theo các tiêu chí (Giá, Tên sản phẩm)

 Xem chi tiết sản phẩm

 Thêm, xem, sửa, xóa giỏ hàng

 Xem chi tiết tin tức, thêm tin

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

 Đối với quản trị viên website

 Quản lý nhân viên, khách hàng

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

 Thêm, xóa, sửa tin tức

 Thêm, xóa, sửa sản phẩm

2.2 Yêu cầu phi chức năng

 Bất kỳ trang nào không vượt quá 5 giây để tải xong

 Giao diện thân thiện, dễ sử dụng với người dùng

 Dễ dàng mở rộng các chức năng của phần mềm đối với nhà phát triển

 Bảo mật dữ liệu thông tin khách hàng

 Đảm bảo duy trì hoạt động lâu dài, hiệu quả

MÔ HÌNH HÓA YÊU CẦU

Hình 23-Lược đồ usecase phía người dùng cuối

Hình 24-Lược đồ usecase phía người quản trị

3.2.1 Đặc tả Use case View home page

Use case View home page

Mô tả Chức năng xem trang chủ website

Tác nhân kích hoạt Tất cả

Tiền điều kiện Không có

1 Use case bắt đầu khi tác nhân truy cập vào liên kết trang chủ website trên các công cụ trình duyệt

2 Hệ thống xác thực phiên hoạt động của người dùng

3 Hệ thống kết nối cơ sở dữ liệu truy vấn các thông tin cần thiết

4 Hệ thống trả về trang chủ website

Bảng 2-Bảng đặc tả use case view home page

3.2.2 Đặc tả Use case Register

Mô tả Chức năng đăng ký mới tài khoản

Tác nhân kích hoạt Guest

Tiền điều kiện Tác nhân chưa đăng nhập vào hệ thống

1 Use case bắt đầu khi tác nhân click vào nút “Đăng ký”

2 Tác nhân điền đầy đủ thông tin theo yêu cầu trong form đăng ký

3 Tác nhân click vào nút “Đăng ký”

3.1 Nếu thông tin đăng ký lỗi: Hệ thống thông báo lỗi Quay lại trang đăng ký

3.2 Nếu thông tin đăng ký hợp lệ: Hệ thống lưu tạm thời thông tin đăng ký Chuyển hướng sang trang xác nhận tài khoản

4 Tác nhân thực hiện xác nhận tài khoản:

4.1 Nếu tác nhân đăng ký bằng email:

4.2.1 Hệ thống sẽ gửi email chứa liên kết xác nhận tài khoản

4.2.2 Tác nhân thực hiện click vào liên kết để xác nhận tài khoản

4.2.3 Hệ thống lưu thông tin đăng ký người dùng vào cơ sở dữ liệu

4.2.4 Hệ thống thông báo đăng ký người dùng thành công

4.2.5 Hệ thống chuyển hướng đến trang chủ

4.2 Nếu tác nhân đăng ký bằng số điện thoại:

4.2.1 Hệ thống sẽ gửi tin nhắn chứa mã code xác nhận tài khoản

4.2.2 Tác nhân thực hiện nhật lại mã code vào ô xác nhận tài khoản

4.2.2.1 Mã code sai: Hệ thống thông báo lỗi Quay lại trang xác nhận mã code

4.2.2.2.1 Hệ thống lưu thông tin vào cơ sở dữ liệu

4.2.2.2.2 Hệ thống thông báo tạo mới người dùng thành công

Bảng 3-Bảng đặc tả use case register

3.2.3 Đặc tả Use case Search product

Mô tả Chức năng tìm kiếm sản phẩm

1 Use case bắt đầu khi tác nhân truy cập vào trang chủ website, hệ thống sẽ hiện thông báo cho phép tìm kiếm tên sản phẩm bất kì trên thanh Search

2.1 Tìm kiếm không có kết quả: Hệ thống sẽ hiện thông báo không tìm thấy kết quả phù hợp

2.2 Tìm kiếm có kết quả: Hệ thống sẽ hiển thị đồng thời: 2.2.1 Danh sách kết quả

3 Tác nhân có thể lọc danh sách kết quả theo:

3.1 Mới nhất (Mặc định) 3.2 Phổ biến nhất

3.3 Giá tăng dần 3.4 Giá giảm dần

Bảng 4-Bảng đặc tả use case search product

3.2.4 Đặc tả Use case View product detail

Use case View product detail

Mô tả Chức năng xem chi tiết sản phẩm

1 Use case bắt đầu khi tác nhân thực hiện click vào liên kết chi tiết sản phẩm

2 Hệ thống kết nối cơ sở dữ liệu truy vấn thông tin chi tiết sản phẩm theo mã sản phẩm

3 Hệ thống trả kết quả về trang chi tiết sản phẩm

Bảng 5-Bảng đặc tả use case view product detail

3.2.5 Đặc tả Use case View news details

Use case View news details

Mô tả Chức năng xem chi tiết tin tức

1 Use case bắt đầu khi tác nhân thực hiện click vào liên kết chi tiết tin tức hoặc trang chủ

2 Hệ thống kết nối cơ sở dữ liệu truy vấn thông tin chi tiết tin tức theo mã tin tưc

3 Hệ thống trả kết quả về trang chủ

Bảng 6-Bảng đặc tả use case view news detail

3.2.6 Đặc tả Use case Login

Mô tả Chức năng đăng nhập

Tác nhân kích hoạt User, Employee, Admin

Tiền điều kiện  Tác nhân đã đăng ký tài khoản trước đó

 Tác nhân chưa đăng nhập vào hệ thống

1 Use case bắt đầu khi tác nhân click vào nút “Đăng nhập”

2 Tác nhân điền thông tin vào form đăng nhập

3 Tác nhân click vào nút “Đăng nhập”

3.1 Nếu thông tin đăng nhập sai: Hệ thống sẽ thông báo lỗi Quay lại trang đăng nhập

3.2 Nếu thông tin đăng nhập chính xác:

3.2.1 Hệ thống tạo phiên hoạt động mới 3.2.2 Quay lại trang chủ website

Bảng 7-Bảng đặc tả use case login

3.2.7 Đặc tả Use case Login by Facebook

Use case Login by Facebook

Mô tả Chức năng đăng nhập bằng Facebook

Tiền điều kiện  Tác nhân đã có tài khoản Facebook

1 Use case bắt đầu khi tác nhân click vào nút “Login nhanh Facebook”

2 Tác nhận thực hiện chọn Đăng nhập bằng tài khoản Facebook hoặc Chấp nhận sử dụng tài khoản Facebook đã đăng nhập

3 Hệ thống sẽ tiến hành xác thực tài khoản Facebook của tác nhân

4 Nếu xác thực Facebook thất bại: Hệ thống thông báo lỗi Quay lại trang Login

5 Nếu xác thực Facebook thành công:

5.1 Nếu tài khoản Facebook người dùng là tài khoản mới chưa có trong hệ thống: Hệ thống tiến hành tạo mới người dùng trong cơ sở dữ liệu

5.2 Hệ thống tạo mới phiên hoạt động cho người dùng 5.3 Hệ thống chuyển hướng đến trang chủ website

Bảng 8-Bảng đặc tả use case login with Facebook

3.2.8 Đặc tả Use case Login by Google

Use case Login by Google

Mô tả Chức năng đăng nhập bằng Google

Tiền điều kiện  Tác nhân đã có tài khoản Google

Các bước thực hiện 1 Use case bắt đầu khi tác nhân click vào nút “Login nhanh

2 Tác nhân thực hiện chọn Đăng nhập bằng tài khoản Google hoặc lựa chọn từ (các) tài khoản đã được đăng nhập

3 Hệ thống sẽ tiến hành xác thực tài khoản Google của tác nhân

3.1 Nếu xác thực Google thất bại: Hệ thống thông báo lỗi Quay lại trang login

3.2 Nếu xác thực Google thành công:

3.2.1 Nếu tài khoản Google người dùng chưa có trong cơ sở dữ liệu: Hệ thống tạo mới người dùng trong cơ sở dữ liệu

3.2.2 Hệ thống tạo mới phiên hoạt động cho người dùng

3.2.3 Hệ thống chuyển hướng trang chủ website

Bảng 9-Bảng đặc tả use case login with Google

3.2.9 Đặc tả Use case Manage info User

3.2.9.1 Đặc tả Use case View info (Manage info User)

Use case View info (Manage info User)

Mô tả Chức năng xem thông tin cá nhân

Tiền điều kiện Tác nhân đã đăng nhập vào hệ thống

Các bước thực hiện 1 Use case bắt đầu khi tác nhân truy cập vào trang quản lý thông tin cá nhân

2 Hệ thống kết nối cơ sở dữ liệu truy vấn thông tin cá nhân theo tài khoản login

3 Hệ thống trả về trang quản lý thông tin cá nhân tác nhân

Bảng 10-Bảng đặc tả use case View user info

3.2.9.2 Đặc tả Use case Update info (Manage information User) Use case Update information (Manage information User)

Mô tả Chức năng cập nhật thông tin cá nhân

Các bước thực hiện 1 Use case bắt đầu khi tác nhân truy cập vào trang quản lý thông tin cá nhân

2 Tác nhân thực hiện thay đổi thông tin cá nhân ở những mục được phép thay đổi

3 Tác nhân click vào nút “Cập nhật”

4 Nếu cập nhật thất bại: Hệ thống thống thông báo lỗi Quay lại trang trang quản lý thông tin cá nhân

5 Nếu cập nhật thành công:

5.1 Hệ thống kết nối vào cơ sở dữ liệu cập nhật mới thông tin cá nhân tác nhân

5.2 Hệ thống thông báo cập nhật thông tin thành công 5.3 Hệ thống chuyển hướng đến trang quản lý thông tin cá nhân

Bảng 11-Bảng đặc tả use case update user info

3.2.10 Đặc tả Use case Manage product

3.2.10.1 Đặc tả Use case View List Products

 Giống đặc tả use case View products detail

3.2.10.2 Đặc tả Use case Add products (Manage products)

Mô tả Chức năng tạo sản phẩm

Tác nhân kích hoạt Employee, Admin

Các bước thực hiện 1 Admin case bắt đầu khi tác nhân nhấn vào nút “Thêm sản phẩm”

2 Tác nhân điền đầy đủ thông tin vào form thêm sản phẩm

3 Tác nhân click vào nút “Thêm sản phẩm”

4 Nếu thông tin không hợp lệ: Hệ thống thông báo lỗi Quay lại trang quản lý sản phẩm

5 Nếu thông tin hợp lệ:

5.1 Hệ thống lưu thông tin cửa hàng vào cơ sở dữ liệu 5.2 Hệ thống thông báo tạo sản phẩm thành công

5.3 Hệ thống chuyển hướng đến trang chi tiết sản phẩm để cập nhật sản phẩm cho trang web

Bảng 12-Bảng đặc tả use case add product

3.2.10.3 Đặc tả Use case Update products info (Manage products)

Use case Update store info (Manage products)

Mô tả Chức năng cập nhật thông tin sản phẩm

Tác nhân kích hoạt User Admin, Employee

Tiền điều kiện  Tác nhân đã đăng nhập vào hệ thống

 Tác nhân là chủ sở hữu của trang web

Các bước thực hiện 1 Use case bắt đầu khi tác nhân truy cập vào trang cập nhật trang admin

2 Tác nhân thực hiện thay đổi thông tin tin tức ở những mục được phép thay đổi

4 Hệ thống kiểm tra thông sản phẩm:

5 Thông tin cập nhật tin tức lỗi: Hệ thống thông báo lỗi Quay lại trang cập nhật sản phẩm

6 Thông tin cập nhật tin tức chính xác:

6.1 Hệ thống kết nối cơ sở dữ liệu cập nhật mới thông tin sản phẩm

6.2 Hệ thống thông báo cập nhật sản phẩm thành công 6.3 Hệ thống chuyển hướng đến trang chi tiết sản phẩm

Bảng 13-Bảng đặc tả use case update products info

3.2.10.4 Đặc tả Use case Delete products (Manage products)

Use case Delete products info (Manage products)

Mô tả Chức năng xóa sản phẩm

Tác nhân kích hoạt User Admin, Employee

Các bước thực hiện 1 Use case bắt đầu khi tác nhân truy cập vào trang quản lý sản phẩm

2 Tác nhân click vào nút “Xóa”

3 Tác nhân thực hiện xác nhận xóa tin tức:

4 Nếu tác nhân xác nhận “NO”: Hệ thống thông báo hủy xóa sản phẩm Quay lại trang quản lý sản phẩm

5 Nếu tác nhân xác nhận “OK”:

5.1 Hệ thống xóa cửa hàng khỏi cơ sở dữ liệu theo mã sản phẩm

5.2 Hệ thống thông báo xóa sản phẩm thành công 5.3 Hệ thống chuyển hướng đến trang quản lý sản phẩm

Bảng 14-Bảng đặc tả use case delete products

3.2.11 Đặc tả Use case Manage news

3.2.11.1 Đặc tả Use case View store detail (Manage news)

 Giống đặc tả use case View product detail

3.2.11.2 Đặc tả Use case Add news (Manage news)

Mô tả Chức năng tạo tin tức

Tác nhân kích hoạt User

Các bước thực hiện 6 Use case bắt đầu khi tác nhân nhấn vào nút “Thêm tin tức”

7 Tác nhân điền đầy đủ thông tin vào form thêm tin tức

8 Tác nhân click vào nút “Thêm tin tức”

9 Nếu thông tin không hợp lệ: Hệ thống thông báo lỗi Quay lại trang quản lý tin tức

10 Nếu thông tin hợp lệ:

10.1 Hệ thống lưu thông tin cửa hàng vào cơ sở dữ liệu

10.2 Hệ thống thông báo tạo cửa hàng thành công 10.3 Hệ thống chuyển hướng đến trang chi tiết tin tức để cập nhật tin tức cho trang web

Bảng 15-Bảng đặc tả use case add news

3.2.11.3 Đặc tả Use case Update news info (Manage news)

Use case Update store info (Manage news)

Mô tả Chức năng cập nhật thông tin tin tức

Các bước thực hiện 7 Use case bắt đầu khi tác nhân truy cập vào trang cập nhật trang admin

8 Tác nhân thực hiện thay đổi thông tin tin tức ở những mục được phép thay đổi

10 Hệ thống kiểm tra thông tin tức:

11 Thông tin cập nhật tin tức lỗi: Hệ thống thông báo lỗi Quay lại trang cập nhật tin tức

12 Thông tin cập nhật tin tức chính xác:

12.1 Hệ thống kết nối cơ sở dữ liệu cập nhật mới thông tin tin tức

12.2 Hệ thống thông báo cập nhật tin tức thành công

12.3 Hệ thống chuyển hướng đến trang chi tiết tin tức

Bảng 16-Bảng đặc tả use case update news info

3.2.11.4 Đặc tả Use case Delete news (Manage news)

Use case Delete news info (Manage news)

Mô tả Chức năng xóa tin tức

Các bước thực hiện 6 Use case bắt đầu khi tác nhân truy cập vào trang quản lý tin tức

7 Tác nhân click vào nút “Xóa”

8 Tác nhân thực hiện xác nhận xóa tin tức:

9 Nếu tác nhân xác nhận “NO”: Hệ thống thông báo hủy xóa tin tức Quay lại trang quản lý tin tức

10 Nếu tác nhân xác nhận “OK”:

10.1 Hệ thống xóa cửa hàng khỏi cơ sở dữ liệu theo mã tin tức

10.2 Hệ thống thông báo xóa tin tức thành công 10.3 Hệ thống chuyển hướng đến trang quản lý tin tức

Bảng 17-Bảng đặc tả use case delete news

3.2.12 Đặc tả Use case Buy product

Mô tả Chức năng mua sản phẩm

Tác nhân kích hoạt Guest, User

Các bước thực hiện 1 Guest, User có thể thực hiện quản lý giỏ hàng bằng cách click vào button “Giỏ hàng” ở góc trên bên phải trên header

Khi đó, hệ thống sẽ tự động chuyển hướng người dùng đến trang Giỏ hàng, nơi có thể xem, xóa và sửa số lượng sản phẩm, cũng như thêm sản phẩm mới vào giỏ hàng Người dùng có thể nhấp vào nút “Thêm vào giỏ hàng” ở phía dưới mỗi sản phẩm để thêm nhanh vào giỏ hàng.

Ở trang Giỏ hàng, người dùng có thể nhấn nút "Tiếp tục mua hàng" ở góc trên bên trái để hệ thống chuyển về trang chủ Nếu là Guest muốn tiến hành đặt hàng, cần đăng nhập trước và hệ thống sẽ chuyển hướng đến trang đăng nhập để tiếp tục quy trình thanh toán.

4 4 - User có thể thay đổi số lượng của mỗi sản phẩm trong giỏ hàng bằng cách thay đổi số lượng trong thẻ input

5 User có thể xóa sản phẩm giỏ hàng hiện tại bằng cách click vào button “Xóa sản phẩm”

6 - Khi đó hệ thống sẽ xóa session giỏ hàng hiện tại và redirect về trang chủ Lúc này, số lượng sản phẩm trong giỏ hàng về lại bằng “0”

Sau khi thêm sản phẩm vào giỏ hàng, người dùng có thể đặt hàng bằng cách điền thông tin giao hàng gồm Họ tên, Email, SĐT và Địa chỉ nhận hàng Các định dạng dữ liệu cụ thể cho từng trường sẽ được mô tả chi tiết như sau để đảm bảo quá trình đặt hàng diễn ra nhanh chóng và chính xác.

+ Họ tên: không có yêu cầu đặc biệt;

+ Email: phải đúng định dạng của regular expression sau:

+ Điện thoại: có đúng 10 ký tự số;

+ Địa chỉ: không có yêu cầu đặc biệt;

- Sau đó, User click vào button “Xác nhận đặt hàng”

Khi người dùng đặt hàng, hệ thống sẽ lưu dữ liệu đặt hàng vào cơ sở dữ liệu và gửi thông tin đơn hàng tới email của khách hàng Sau đó hiển thị thông báo "Đặt hàng thành công" và thực hiện chuyển hướng người dùng về trang chủ, đảm bảo khách hàng nhận được xác nhận và có trải nghiệm mua sắm thuận tiện.

7 Hệ thống kết nối vào cơ sở dữ liệu tạo mới lượt đơn hàng sản phẩm theo mã sản phẩm và mã người dùng

Bảng 18-Bảng đặc tả use case buy product

3.2.13 Đặc tả Use case Chat

Mô tả Chức năng Bình luận

Các bước thực hiện 1 Use case bắt đầu khi tác nhân nhập nội dung chat vào form chat sau đó nhấn Enter

2 Hệ thống kết nối vào cơ sở dữ liệu và lưu nội dung cùng mã người dùng của người dùng đó và mã sản phẩm được Chat vào cơ sở dữ liệu Fchat facebook

Bảng 19-Bảng đặc tả use case Chat

3.2.14 Đặc tả Use case Logout

Mô tả Chức năng đăng xuất, kết thúc phiên hoạt động

Các bước thực hiện 1 Use case bắt đầu khi tác nhân click vào nút “Đăng xuất”

2 Hệ thống xóa tài khoản tác nhân khỏi phiên hoạt động

3 Hệ thống chuyển hướng đến trang chủ website

Bảng 20-Bảng đặc tả use case logout

3.2.15 Đặc tả Use case Statistic (Website owner)

Use case Statistic (Store owner)

Mô tả Chức năng xem thống kê của chủ cửa hàng

Tác nhân kích hoạt Store owner

Các bước thực hiện 1 Use case bắt đầu khi tác nhân click vào nút “Thống kê” ở trang Quản lý thống kê của trang admin

2 Hệ thống sẽ kết nối cơ sở dữ liệu để trả về các thông tin đã thống kê: số lượng sản phẩm hiện tại, số lượng sản phẩm đã bán

3 Hiển thị các biểu đồ đánh giá về tình hình bán hàng theo tháng, quý và năm

Bảng 21-Bảng đặc tả use case Statistic (Website owner)

3.2.16 Đặc tả Use case Add Admin account

Use case Add Admin account

Mô tả Chức năng thêm tài khoản Admin

Tác nhân kích hoạt Admin

Các bước thực hiện 1 Use case bắt đầu khi tác nhân nhấn nút Thêm nhân viên ở trang Quản lý nhân viên

2 Hệ thống hiển thị form Thêm nhân viên

3 Admin nhập thông tin nhân viên vào form thông tin và sau đó nhấn “Tạo nhân viên”

4 Nếu thông tin chính xác:

4.1 Hệ thống lưu thông tin nhân viên vào cơ sở dữ liệu

4.2 Hệ thống thông báo thêm nhân viên thành công

4.3 Reset lại form Thêm nhân viên

5 Nếu thông tin không chính xác: Hệ thống thông báo lỗi thông tin chưa chính xác

Bảng 22-Bảng đặc tả use case add employee

THIẾT KẾ PHẦN MỀM

THIẾT KẾ HỆ THỐNG

Hình 25-Lược đồ lớp – Model Layer

Hình 26-Lược đồ tuần tự View home page

Hình 27-Lược đồ tuần tự Search product

Hình 28-Lược đồ tuần tự View product detail

Hình 29-Lược đồ tuần tự Buy product

Hình 30-Lược đồ tuần tự Register

Hình 31-Lược đồ tuần tự Login

1.2.7.1 View info (Manage info User)

1.2.7.2 Update info (Manage info User)

Hình 32-Lược đồ tuần tự Update info

Hình 33-Lược đồ tuần tự Logout

THIẾT KẾ CƠ SỞ DỮ LIỆU

2.1 Cấu trúc dữ liệu user: { id, authorization: { local: { id, username, password, datapoint, email, resetPasswordToken, resetPasswordExpire

}, facebook: { id, token, email, name

}, google: { id, token, email, name,

70 address, avatars, isEmailActivated, forgetPasswordToken, forgetPasswordTokenExpire, news: [{ id, newsCategory: { id, name }, name, description, timestamp, images, rates, logo, videos, isActivated, website: { hasWebsite, url

}, facebook, googlePlus, template, products: [{ id, productCategory: { id,

71 name }, name, description, price, saleoff, images, rates: [{ id, user, content, stars, timestamp }] timstampe, url, viewCount, comments: [{ id, user, content, timstamp, replyComment: [{ id, user, content, timestamp }]

} conversation: { id, user1, user2, messages: [{ id, content, user, timestamp }]

} employee: { id, department: { id, name }, user, salary, timeStart

2.2 Các ràng buộc toàn vẹn

2.2.1 Không cho phép thêm, xóa hay sửa đổi các collection được tạo sẵn trong cơ sở dữ liệu

 Bối cảnh: Tất cả các collections

2.2.2 Mỗi user chỉ được cấp 1 phân quyền duy nhất để truy cập hệ thống và không được phép thay đổi phân quyền

 Người dùng phải đăng nhập mới có thể mua sản phẩm

2.2.3 Người dùng phải đăng nhập mới có thể đánh giá

2.2.4 Người dùng phải đăng nhập mới có thể bình luận

2.2.5 Mỗi người dùng chỉ có thể đánh giá 1 lần duy nhất cho mỗi sản phẩm

 Bối cảnh: User, Product, Rate

2.2.6 Mỗi người dùng có thể bình luận nhiều lần trên 1 sản phẩm và có thể bình luận trên nhiều sản phẩm

 Bối cảnh: User, Product, Comment

2.2.7 Mỗi nhân viên bắt buộc phải thuộc 1 phòng ban duy nhất

2.3 Lược đồ thực thể quan hệ

Hình 34-Lược đồ thực thể quan hệ

2.4 Mô tả chi tiết các bảng dữ liệu

NAME OPTIONS DESCRIPTION id { type: ObjectId } name { type: String, required: true, maxlength: 20, trim: true }

Bảng 23-Mô tả chi tiết bảng dữ liệu Authorization

DOCUMENTS NAME OPTIONS DESCRIPTION id { type: ObjectId } authorization { type: ObjectId, ref:

To implement a reliable contact schema, define four required string fields: type, firstname, lastname, and phone The type field should store a short descriptor as a string with a maximum length of 30 characters and be trimmed to remove leading or trailing whitespace The firstname and lastname fields must be required strings with a maximum length of 20 characters each, also trimmed for clean input The phone field should be a required string limited to 20 characters and trimmed to prevent spacing issues These validation rules—required fields, maximum lengths, and trim—help maintain consistent, clean data for contact records and support robust data validation in your application.

{ type: String, required: true, maxlength: 30, trim: true, unique: true

The user model includes a required password field (string, max 30 characters, trimmed) and an optional address (string, max 250, trimmed), a boolean gender with a default of false, and a birthday stored as a Date The timeRegister field records the join time as a required Date with a default of Date.now The about field is required, up to 2500 characters, trimmed, while avatars is an array of strings representing avatar URLs, each entry required and trimmed with a max length of 250 The model also includes activation flags isPhoneActivated and isEmailActivated, both booleans, required and defaulting to true For password recovery, forgetPasswordToken is a unique string up to 10 characters, trimmed, and forgetPasswordTokenExpire stores the expiration date.

Bảng 24-Mô tả chi tiết bảng dữ liệu User

NAME OPTIONS DESCRIPTION id { type: ObjectId } name { type: String, required: true, maxlength:

Bảng 25-Mô tả chi tiết bảng dữ liệu NewsCategory

Bảng 26-Mô tả chi tiết bảng dữ liệu ProductCategory

NAME OPTIONS DESCRIPTION id { type: Schema.Types.ObjectId } productCategory { type: Schema.Types.ObjectId, ref:

'ProductCategory' } name { type: String, required: true, maxlength:

30, trim: true } description { type: String, required: true, maxlength:

2500, trim: true } price { type: Number, required: true } saleoff { type: Number, required: true, default: 0 }

79 images [{ type: String, required: true, maxlength:

250, trim: true }] videos [{ type: String, required: true, maxlength:

[{ user: { type: Schema.Types.ObjectId, ref:

'User' }, stars: { type: Number, required: true, min:

0, max: 5, default: 0 }, timestamp: { type: Date, required: true, default: Date.now }

}] timestamp { type: Date, required: true, default:

Date.now } url { type: String, maxlength: 300, trim: true } viewsCount [{ type: Date, default: Date.now }]

Bảng 27-Mô tả chi tiết bảng dữ liệu Product

NAME OPTIONS DESCRIPTION id { type: ObjectId } newsCategory { type: ObjectId, ref: 'StoreCategory' } user { type: ObjectId, ref: 'User' } country { type: ObjectId, ref: 'City' } name { type: String, required: true, maxlength:

80 description { type: String, required: true, maxlength:

2500, trim: true } timestamp { type: Date, required: true, default:

Date.now } images [{ type: String, required: true, maxlength:

250, trim: true }] videos [{ type: String, required: true, maxlength:

[{ user: { type: Schema.Types.ObjectId, ref: 'User' }, stars: { type: Number, required: true, min:

0, max: 5, default: 0 }, content: { type: String, maxLength: 250, required: true }, timestamp: { type: Date, required: true, default: Date.now }

}] logo { type: String, maxlength: 300, trim: true } isActivated { type: Boolean, required: true, default: true

{ hasWebsite: { type: Boolean, required: true, default: false }, url: { type: String, maxlength: 100, trim: true }

} facebook { type: String, maxlength: 100, trim: true }

81 googlePlus { type: String, maxlength: 100, trim: true } template { type: String, maxlength: 100, trim: true }

Bảng 28-Mô tả chi tiết bảng dữ liệu News

NAME OPTIONS DESCRIPTION id { type: ObjectId } user1 { type: ObjectId, ref: 'User' } user2 { type: ObjectId, ref: 'User' } messages

[{ content: { type: String, required: true, maxlength: 250, trim: true }, user: { type: ObjectId, ref: 'User' }, timestamp: { type: Date, required: true, default: Date.now }

Bảng 29-Mô tả chi tiết bảng dữ liệu Conversation

Bảng 30-Mô tả chi tiết bảng dữ liệu Department

NAME OPTIONS DESCRIPTION id { type: ObjectId } department { type: Schema.Types.ObjectId, ref:

"Department" } user { type: ObjectId, ref: 'User' } salary { type: Number, required: true, min: 0, default: 0 } timeStart { type: Date, required: true, default:

Bảng 31-Mô tả chi tiết bảng dữ liệu Employee

THIẾT KẾ GIAO DIỆN

Hình 35-Hình ảnh giao diện trang chủ khách hàng

1 Image, Text, Link Logo và Tên website và Liên kết trang chủ

2 Link Liên kết trang chủ

3 Link Liên kết trang danh mục sản phẩm

4 Link Liên kết trang tin tức

5 Link Liên kết trang liên hệ

6 List Liên kết trang giỏ hàng

7 Link Liên kết trang đăng nhập/ đămg kí

8 Input Nhập thông tin muốn tìm kiếm nhanh

9 Button Xác nhận thông tin tìm kiếm

Hàm tương tác người dùng qua messenger của facebook chủ

11 Image Hiển thị hình ảnh sản phẩm

Mô tả tên sản phẩm và liên kết trang chi tiết sản phẩm đó

Mô tả tên giá cả và liên kết trang chi tiết sản phẩm đó

14 Button Xác nhận thêm sản phẩm vào giỏ hàng

15 Link Liên kết trang đồ dùng văn phòng

16 Link Liên kết trang đồ dùng học tập

17 Link Liên kết trang đồ dùng gia đình

18 Link Liên kết trang đồ dùng khác

19 Image Hình ảnh đại diện của tin tức

20 Span Thông tin loại tin tức

21 Link text Mô tả tên tin tức và liên kết trang chi tiết tin tức

23 Text Mô tả thời gian đăng tin

24 Image Hình ảnh đại diện của trang web

25 Link Liên kết trang trang chủ

26 Link Liên kết trang danh mục sản phẩm

27 Link Liên kết trang tin tức

29 Link Liên kết trang đồ dùng học tập

30 Link Liên kết trang đồ dùng gia đình

31 Link Liên kết trang đồ dùng văn phòng

32 Link Liên kết trang đồ dùng khác

Hàm tương tác người dùng qua messenger của facebook chủ

34 Link Trở về đầu trang

Bảng 32-Bảng mô tả chi tiết các đối tượng trên giao diện trang chủ

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

Hình 36-Hình ảnh trang chi tiết sản phẩm

2 Image Ảnh đại diện cho sản phẩm

3 Text Mô tả tên sản phẩm

4 Button Xác nhận thêm sản phẩm vào giỏ hàng

5 Input text Mô tả đơn giá cho 1 sản phẩm

7 Dropdown Danh mục sản phẩm

8 Image Ảnh đại diện cho sản phẩm

9 Text Thông tin về sản phầm

Bảng 33-Bảng mô tả chi tiết các đối tượng trên giao diện trang chi tiết sản phẩm

3.3 Giao diện trang đăng nhập

Hình 37-Hình ảnh trang giao diện đăng nhập khách hàng

1 Input text Nhập tên email đăng nhập

2 Input text Nhấn chọn chức năng đăng ký

4 Button Đăng nhập nhanh bằng Facebook

5 Button Đăng nhập nhanh bằng Google

6 Button Nhấn chọn chức năng đăng ký

7 Span link Liên kết trang lấy lị mật khẩu

Bảng 34-Bảng mô tả chi tiết các đối tượng trên giao diện trang đăng nhập khách hàng

3.4 Giao diện trang đăng ký

Hình 38-Hình ảnh trang giao diện đăng ký

1 Text Thông tin tên trang

4 Button Nhấn xác nhận đăng ký

5 Link Liên kết trang đăng nhập

6 Link Liên kết trang chủ

Bảng 35-Bảng mô tả chi tiết các đối tượng trên giao diện trang đăng ký khách hàng

3.5 Giao diện trang tin tức

Hình 39-Hình ảnh trang giao diện trang tin tức

2 Video về tin tức

3 Text Hiển thị những thông tin mô tả về tin tức

4 Span text Hiển thị thông tin và số lượng người like

5 Image Hiển thị hình ảnh người dùng đăng tin

6 Text Hiển thị tên người đăng tin

7 Text Hiển thị thông tin người đăng tin

8 H text Hiển thị thông tin và số lượng người comment

9 Image Hiển thị hình ảnh người dùng comment

10 Text Hiển thị thông tin người đăng comment

11 Text Hiển thị tên người đăng comment

12 Text Hiển thị thời gian đăng comment

13 Link text Xác nhận người dùng Reply

14 Button Xác nhận thêm tin tức vào trang web

15 Button Xác nhận muốn chat online

16 Text Hiển thị thông tin mô tả

17 Text Hiển thị thông tin số lượng tin Việt Nam

18 Text Hiển thị thông tin số lượng tin thế giới

19 Image Hình ảnh đại diện của tin tức

20 Span Thông tin loại tin tức

Bảng 36-Bảng mô tả chi tiết các đối tượng trên giao diện trang tin tức

3.6 Giao diện trang danh mục 1 loại sản phẩm

Hình 40-Hình ảnh trang giao diện theo danh mục 1 loại

2 Select option Xác nhận chọn phương thức lọc theo tên sản phẩm

3 Select option Xác nhận chọn phương thức lọc theo giá sản phẩm

4 Button Nhấn xác nhận lọc

5 Image Hình ảnh đại diện của sản phẩm

6 Button Liên kết trang chi tiết sản phẩm

Hiển thị tên sản phẩm và liên kết trang chi tiết sản phẩm

8 P text Hiển thị giá sản phẩm

9 Span text Hiển thị số lượng sản phẩm đang có của trang

10 Link Liên kêt đến trang theo phân trang

Bảng 37-Bảng mô tả chi tiết các đối tượng trên giao diện trang danh mục 1 loại sản phẩm

3.7 Giao diện trang giỏ hàng

Hình 41-Hình ảnh trang giao diện giỏ hàng

2 Div Thong tin mô tả

3 Div Thông tin mô tả chính

4 Div Thông tin mô tả số thứ tự

5 Div Thông tin mô tả tên sản phẩm

6 Div Thông tin mô tả hình ảnh

7 Div Thông tin mô tả số lượng

8 Div Thông tin mô tả đơn giá

9 Div Thông tin mô tả thành tiền

10 Div Thông tin mô tả xem chi tiết sản phẩm

11 Div Thông tin mô tả xóa sản phẩm

12 Div Thông tin tổng tiền sản phẩm

13 Button Xác nhận mua tiếp liên kết trang chủ

14 Button Xác nhận đặt hàng

Bảng 38-Bảng mô tả chi tiết các đối tượng trên giao trang giỏ hàng

3.8 Giao diện trang thông tin khách hàng

Hình 42-Hình ảnh trang giao diện thông tin đặt hàng

2 Div Thông tin mô tả

3 Input text Nhập họ tên khách hàng

4 Input text Nhập họ email khách hàng

5 Input text Nhập địa chỉ khách hàng

6 Input text Nhập số điện thoại khách hàng

7 Button Xác nhận quay lại trang giỏ hàng

8 Button Xác nhận quay lại trang tiếp theo

Bảng 39-Bảng mô tả chi tiết các đối tượng trên giao diện trang thông tin đặt hàng

3.9 Giao diện trang thông tin đơn hàng

Hình 43-Hình ảnh trang giao diện thông tin đơn hàng

3 Input text Nhập họ tên khách hàng

4 Input text Nhập họ email khách hàng

5 Input text Nhập địa chỉ khách hàng

6 Input text Nhập số điện thoại khách hàng

7 Text Thông tin mô tả chính

8 Input Click chọn phương thức thanh toán

9 Lable Hiển thị thông tin phương thức thanh toán

10 Input Hiển thị tổng tiền

11 Input Hiển thị phí vận chuyển

13 Div Hiển thị thông tin mô tả số thứ tự

14 Div Hiển thị thông tin mô tả tên sản phẩm

15 Image Hiển thị ảnh đại diện sản phẩm

16 Input Hiển thị số lượng đã chọn

17 Div Hiển thị thông tin mô tả giá

18 Div Hiển thị thông tin mô tả tổng tiền

20 Input Hiển thị tổng tiền thanh toán

21 Input Hiển thị ngày đặt hàng

22 Button Xác nhận đồng ý tạo đơn hàng

23 Button Xác nhận xóa đơn hàng

Bảng 40-Bảng mô tả chi tiết các đối tượng trên trang thông tin đặt hàng

3.10 Giao diện trang quản lý đơn hàng đã mua

Hình 44-Hình ảnh trang giao diện quản lý đơn hàng đã mua

2 Text Thông tin mô tả chung

4 Div Thông tin mô tả mã đơn

5 Div Thông tin mô tả ngày đặt

6 Div Thông tin mô tả tổng tiền

7 Div Thông tin mô tả trạng thái giao hàng

8 Button Xác nhận xem chi tiết đơn hàng

9 Button Xác nhận hủy đơn hàng

Bảng 41-Bảng mô tả chi tiết các đối tượng trên giao diện trang danh sách đơn đã đặt

3.11 Giao diện trang chi tiết hóa đơn

Hình 45-Hình ảnh trang giao diện chi tiết hóa đơn

2 Text Thông tin mô tả chung

4 Div Thông tin mô tả số thứ tự

6 Image Hiển thị hình ảnh đại diện sản phẩm

7 Input Thông tin mô tả số lượng sản phẩm

8 Div Thông tin mô tả đơn giá sản phẩm

9 Div Thông tin mô tổng giá sản phẩm

10 Button Xác nhận xem chi tiết sản phẩm

Bảng 42-Bảng mô tả chi tiết các đối tượng trên giao diện trang chi tiêt hóa đơn

3.12 Giao diện trang đăng nhập Admin

Hình 46-Hình ảnh trang giao diện đăng nhập admin

1 Lable Thông tin báo người dùng nhập tên

2 Input text Nhập tên người dùng đăng nhập

3 Lable Thông tin báo người dùng nhập password

4 Input text Nhập password người dùng đăng nhập

5 Button Xác nhận đăng nhập

6 Span link Liên kết trang đăng nhập

7 Div link Liên kết trang thông tin web chính

Bảng 43-Bảng mô tả chi tiết các đối tượng trên giao diện trang đăng nhập admin

3.13 Giao diện trang chủ admin

Hình 47-Hình ảnh trang giao diện chủ admin

1 Link Liên kết trang chủ admin

2 Link Liên kết trang chủ admin

3 ul Hiển thị danh sách loại sản phẩm

4 Link Liên kết trang danh sách sản phẩm học tập

5 Link Liên kết trang danh sách sản phẩm văn phòng

6 Link Liên kết trang danh sách sản phẩm gia đình

7 Link Liên kết trang danh sách sản phẩm khác

8 Link Liên kết trang danh sách tin tức

9 Link Liên kết trang chi tiết sản phẩm

10 ul Hiển thị danh sách chọn

11 Link Liên kết trang danh sách nhân viên

12 Link Liên kết trang thông tin cá nhân

13 Link Liên kết trang login

16 Lable Hiển thị thông tin chung

17 Input Nhập thông tin loại sản phẩm

18 Input Nhập thông số lượng sản phẩm

19 Input Nhập thông ngày nhập sản phẩm

20 Textarea Nhập thông mô tả sản phẩm

21 Button Xác nhận lưu thông tin

22 Button Xác nhận hủy thông tin

23 Span id Hiển thị thông tin đăng nhập

24 Header Hiển thị thông tin

25 Th Hiển thị thông tin chung

28 Td Hiển thị số lượng

29 Td Hiển thị ngày nhập

30 Td Hiển thị mô tả

31 Button Xác nhận xem chi tiết

Bảng 44-Bảng mô tả chi tiết các đối tượng trên giao diện trang chủ admin

3.14 Giao diện trang danh sách 1 loại sản phẩm

Hình 48-Hình ảnh trang giao diện danh sách 1 loại sản phẩm

2 Button Xác nhận thêm sản phẩm mới

4 Div Thông tin mô tả id sản phẩm

6 Div Text Thông tin mô tả giá nhập sản phẩm

7 Div Thông tin mô tả giá bán sản phẩm

8 Input Thông tin mô tả số lượng sản phẩm

9 Div Thông tin mô tả loại sản phẩm

10 Image Hiển thị hình ảnh đại diện sản phẩm

11 Div Thông tin mô tả ngày sản phẩm

12 Div Thông tin mô tả thông tin sản phẩm

13 Button Xác nhận sửa sản phẩm

14 Button Xác nhận xóa sản phẩm

15 Link Liên kêt đến trang theo phân trang

Bảng 45-Bảng mô tả chi tiết các đối tượng trên giao diện trang danh sách 1 loại sản phẩm

3.15 Giao diện trang thêm sản phẩm

Hình 49-Hình ảnh trang giao diện thêm sản phẩm

2 Lable Thông tin mô tả chính

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

4 Input text Nhập tên giá nhập sản phẩm

5 Input text Nhập tên giá bán sản phẩm

6 Input text Nhập tên số lượng sản phẩm

7 Input text Nhập loại hình ảnh

8 Input Hiển thị chọn loại sản phẩm

9 Lable Input Chọn hình ảnh sản phẩm

10 Input text Nhập ngày nhập sản phẩm

11 textarea Nhập mô tả sản phẩm

12 Button Xác nhận lưu thêm sản phẩm

Bảng 46-Bảng mô tả chi tiết các đối tượng trên giao diện trang thêm sản phẩm

3.16 Giao diện trang sửa sản phẩm

Hình 50-Hình ảnh trang giao diện xóa sản phẩm

2 Lable Thông tin mô tả chính

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

4 Input text Nhập tên giá nhập sản phẩm

5 Input text Nhập tên giá bán sản phẩm

6 Input text Nhập tên số lượng sản phẩm

7 Input Hiển thị chọn loại sản phẩm

8 Input text Nhập loại hình ảnh

10 Image Hiển thị ảnh đại diện sản phẩm

11 Input file Chọn hình ảnh mới

12 Input text Nhập ngày nhập sản phẩm

13 textarea Nhập mô tả sản phẩm

14 Button Xác nhận lưu thêm sản phẩm

15 Button Xác nhận hủy cập nhập

Bảng 47-Bảng mô tả chi tiết các đối tượng trên giao diện trang sửa sản phẩm

3.17 Giao diện trang thống kê

Hình 51-Hình ảnh trang giao diện trang thống kê

3 Button Xuất chart thành file pdf, jpg, png

Bảng 48-Bảng mô tả chi tiết các đối tượng trên giao diện trang thống kê

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

PHẦN KẾT LUẬN

Định dạng
Số trang	127
Dung lượng	5,17 MB