Xây dựng ứng dụng web tạo website bán hàng

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

Tốc độ phát triển nhanh chóng của xã hội và công nghệ đã tạo điều kiện thuận lợi cho sự bùng nổ của thương mại điện tử Điều này giúp các doanh nghiệp giảm đáng kể chi phí sản xuất, tìm kiếm khách hàng, bán hàng và tiếp thị, đồng thời mở rộng quy mô khách hàng và tăng cường hiệu quả kinh doanh Khách hàng cũng hưởng lợi từ việc mua sắm trực tuyến 24/7, tiết kiệm thời gian và chi phí di chuyển, đồng thời có cơ hội so sánh và lựa chọn sản phẩm tốt nhất cho nhu cầu của mình.

Để xây dựng một kênh thương mại điện tử hiệu quả, cần có kiến thức sâu rộng về công nghệ và đầu tư nhiều thời gian, công sức Nhằm nắm bắt xu hướng và giải quyết vấn đề này, nhóm đã quyết định nghiên cứu và phát triển ứng dụng "Tạo website bán hàng" để ứng dụng vào thực tiễn.

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

Đề tài này nhằm giúp sinh viên tổng hợp kiến thức về lập trình web, đồng thời khám phá các công nghệ mới và ứng dụng chúng vào thực tiễn Sinh viên sẽ được hướng dẫn cách xây dựng website bán hàng một cách nhanh chóng và đơn giản, chỉ trong vài phút thiết kế Hệ thống cho phép người dùng xem trước và tự động triển khai website, đảm bảo đáp ứng tiêu chí "Responsive Web Design" với các chức năng cơ bản của một website bán hàng Ngoài ra, còn có công cụ quản lý giúp người dùng dễ dàng quản lý sản phẩm và đơn hàng.

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

Đối tượng nghiên cứu

- Nghiên cứu và sử dụng ngôn ngữ JavaScript, framework VueJS, nền tảng NodeJS, docker, NGINX để xây dựng ứng dụng

- Sử dụng hệ quản trị cơ sở dữ liệu MongoDB để xây dựng database lưu trữ dữ liệu

- Nghiên cứu nhu cầu sử dụng, tạo website bán hàng của người dùng.

Phạm vi nghiên cứu

Nghiên cứu áp dụng VueJS, NodeJS, Docker và NGINX để phát triển ứng dụng web cho phép tạo website bán hàng thông qua giao diện kéo thả Ứng dụng này cung cấp các tính năng cơ bản cần thiết cho một website thương mại điện tử và hỗ trợ triển khai tự động lên subdomain.

Phương pháp nghiên cứu

- Phương pháp tổng hợp lý thuyết: nghiên cứu và tìm hiểu các tài liệu, ứng dụng liên quan đến công nghệ đang tìm hiểu

Phương pháp chuyên gia là việc tham khảo ý kiến từ thầy hướng dẫn, các anh chị và bạn bè có kinh nghiệm, nhằm nâng cao độ chính xác và tính khoa học cho đề tài tiểu luận.

- Phương pháp mô hình hóa: mô phỏng ứng dụng các bước từ thiết kế cài đặt cho đến kết quả thành phẩm của ứng dụng.

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

‑ Tạo công cụ hỗ trợ kéo thả giao diện, tùy biến các thành phần website (màu sắc, style, theme, font chữ, bố cục)

‑ Cho phép preview và deploy website tự động trên subdomain

‑ Các website được tạo đáp ứng được tiêu chí “Responsive Web Design”

‑ Tạo công cụ quản lý database cho các website được tạo ra

Website được xây dựng với các chức năng cơ bản của một trang bán hàng, bao gồm tìm kiếm và lọc sản phẩm, tính năng giỏ hàng và đặt hàng, thông báo qua email khi trạng thái đơn hàng thay đổi, cũng như khả năng xem lịch sử mua hàng.

CƠ SỞ LÝ THUYẾT

NGÔN NGỮ LẬP TRÌNH JAVASCRIPT

JavaScript đã giữ vị trí là ngôn ngữ lập trình phổ biến nhất toàn cầu trong suốt 20 năm qua và là một trong ba ngôn ngữ chính trong lập trình web, bên cạnh HTML và CSS.

JavaScript nổi bật với nhiều ưu điểm vượt trội so với các ngôn ngữ lập trình khác, đặc biệt trong các ứng dụng thực tế Một số lợi ích chính của JavaScript bao gồm tính linh hoạt, khả năng tương tác cao, và hỗ trợ mạnh mẽ cho phát triển web, giúp cải thiện trải nghiệm người dùng và tối ưu hóa hiệu suất trang web.

- Không cần một compiler vì web browser có thể biên dịch nó bằng HTML

- Lỗi dễ phát hiện hơn và vì vậy dễ sửa hơn

- Nó có thể được gắn trên một số element của trang web hoặc event của trang web như là thông qua click chuột hoặc di chuột tới

- JS hoạt động trên nhiều trình duyệt, nền tảng, …

- Bạn có thể sử dụng JavaScript để kiểm tra input và giảm thiểu việc kiểm tra thủ công khi truy xuất qua database

- Nó giúp website tương tác tốt hơn với khách truy cập

- Nó nhanh hơn và nhẹ hơn các ngôn ngữ lập trình khác

HỆ QUẢN TRỊ CƠ SỞ DỮ LIỆU MONGODB

- MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql và được hàng triệu người sử dụng

MongoDB là một cơ sở dữ liệu tài liệu, nơi dữ liệu được lưu trữ dưới dạng document kiểu JSON thay vì trong các bảng như trong cơ sở dữ liệu quan hệ, giúp cải thiện tốc độ truy vấn một cách đáng kể.

Trong CSDL quan hệ, dữ liệu được tổ chức dưới dạng bảng, như trong MySQL hay SQL Server Ngược lại, MongoDB sử dụng khái niệm tài liệu thay vì bảng để lưu trữ dữ liệu.

- So với RDBMS thì trong MongoDB collection ứng với table, còn document sẽ ứng với row , MongoDB sẽ dùng các document thay cho row trong RDBMS

- Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ không cần tuân theo một cấu trúc nhất định

- Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh thông qua ngôn ngữ truy vấn MongoDB

MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON, cho phép mỗi collection có kích cỡ và các document khác nhau Điều này mang lại tính linh hoạt cao trong việc lưu trữ dữ liệu, giúp người dùng dễ dàng thêm mới dữ liệu mà không gặp phải ràng buộc nào.

Dữ liệu trong MongoDB không có sự ràng buộc lẫn nhau và không hỗ trợ join như trong hệ quản trị cơ sở dữ liệu quan hệ (RDBMS), do đó, quá trình chèn, xóa hoặc cập nhật dữ liệu diễn ra nhanh chóng mà không cần kiểm tra các ràng buộc dữ liệu.

MongoDB nổi bật với khả năng mở rộng dễ dàng thông qua tính năng mở rộng ngang (Horizontal Scalability) Hệ thống sử dụng khái niệm cluster, trong đó các node chứa dữ liệu tương tác với nhau Để mở rộng hệ thống, người dùng chỉ cần thêm một node mới vào cluster hiện có.

- Trường dữ liệu “_id” luôn được tự động đánh index (chỉ mục) để tốc độ truy vấn thông tin đạt hiệu suất cao nhất

Khi có một truy vấn dữ liệu, bản ghi sẽ được lưu trữ trong bộ nhớ RAM, giúp tăng tốc độ truy vấn tiếp theo mà không cần truy cập vào ổ cứng.

- Hiệu năng cao: Tốc độ truy vấn (find, update, insert, delete) của MongoDB nhanh hơn hẳn so với các hệ quản trị cơ sở dữ liệu quan hệ (RDBMS)

Một trong những ưu điểm của MongoDB cũng chính là nhược điểm của nó: thiếu các tính chất ràng buộc như trong hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) Do đó, khi thao tác với MongoDB, người dùng cần phải hết sức cẩn thận để tránh những sai sót không mong muốn.

Dữ liệu lưu trữ dưới dạng key-value tiêu tốn bộ nhớ, vì các collection chỉ khác nhau ở giá trị, dẫn đến việc lặp lại key Hơn nữa, việc không hỗ trợ join khiến cho dữ liệu dễ bị dư thừa.

Khi thực hiện các thao tác insert, update hoặc remove bản ghi, MongoDB không cập nhật ngay lập tức xuống ổ cứng mà sẽ lưu trữ dữ liệu thay đổi trong RAM trong vòng 60 giây Điều này có thể trở thành nhược điểm, bởi vì có nguy cơ mất dữ liệu trong các tình huống như mất điện.

NỀN TẢNG NODEJS

NodeJS là một nền tảng mã nguồn mở dựa trên Javascript V8 Engine, được sử dụng để phát triển các ứng dụng web như trang video clip, diễn đàn và mạng xã hội chuyên biệt Với khả năng chạy trên nhiều hệ điều hành như Windows, Linux và OS X, NodeJS trở thành lựa chọn phổ biến cho hàng ngàn lập trình viên trên toàn thế giới Nó cung cấp nhiều thư viện phong phú dưới dạng Javascript Module, giúp đơn giản hóa quá trình lập trình và tối ưu hóa thời gian phát triển.

NodeJS hoạt động hoàn toàn không đồng bộ, dựa vào nền tảng của máy chủ NodeJS để chờ nhận dữ liệu từ các API Cơ chế này cho phép máy chủ di chuyển đến các API tiếp theo sau khi thực hiện cuộc gọi, đồng thời nhận phản hồi từ các cuộc gọi trước đó theo thời gian thực (Realtime).

- Tốc độ rất nhanh: NodeJ được xây dựng dựa vào nền tảng V8 Javascript

Engine nên việc thực thi chương trình rất nhanh

Node.js sử dụng mô hình đơn luồng với cơ chế tổ chức sự kiện, cho phép máy chủ hoạt động không ngăn chặn và mở rộng cao hơn so với các máy chủ truyền thống Điều này giúp Node.js xử lý một lượng lớn yêu cầu đồng thời, vượt trội hơn hẳn so với các máy chủ như Apache HTTP Server, vốn có giới hạn trong khả năng phục vụ.

- Không đệm: NodeJS không đệm bất kì một dữ liệu nào và các ứng dụng này chủ yếu là đầu ra dữ liệu

- Có giấy phép: NodeJS đã được cấp giấy phép bởi MIT License.

FRAMEWORK VUEJS

Vue là một framework JavaScript tiên tiến, chuyên dụng cho việc xây dựng giao diện người dùng Khác với các framework khác, Vue được phát triển từ những dòng code cơ bản nhất để tối ưu hóa tốc độ Thư viện của Vue chỉ tập trung vào lớp hiển thị, mang lại sự đơn giản trong việc tiếp cận và dễ dàng tích hợp vào các hệ thống khác.

Các ứng dụng web đơn trang (Single Page Application - SPA) mang lại trải nghiệm người dùng mượt mà và hiệu quả, cho phép tích hợp với nhiều công cụ hiện đại như Laravel Với thiết kế chỉ trên một trang, SPA tối ưu hóa tốc độ tải trang và cải thiện khả năng tương tác, giúp người dùng dễ dàng truy cập thông tin mà không cần tải lại trang.

Vue.js là một framework mạnh mẽ để xây dựng giao diện người dùng, tương tự như React của Facebook, Angular được Google hỗ trợ, và Ember Đặc biệt, Vue.js nổi bật với tốc độ tạo trang nhanh chóng và mức tiêu thụ bộ nhớ thấp, mang lại hiệu suất tối ưu cho các ứng dụng web.

NỀN TẢNG DOCKER

Docker là nền tảng mở cung cấp công cụ và dịch vụ cho phép người dùng đóng gói và triển khai ứng dụng của mình trên nhiều môi trường khác nhau một cách nhanh chóng và hiệu quả.

- Không như máy ảo, Docker khởi động và dừng chỉ trong vài giây

- Bạn có thể khởi chạy container trên mỗi hệ thống mà bạn muốn

- Container có thể build và loại bỏ nhanh hơn máy ảo

Việc thiết lập môi trường làm việc trở nên đơn giản hơn bao giờ hết, chỉ cần cấu hình một lần duy nhất mà không cần phải cài đặt lại các dependencies Khi bạn thay đổi máy tính hoặc có thành viên mới tham gia vào dự án, chỉ cần chia sẻ cấu hình đó để họ có thể nhanh chóng bắt đầu làm việc.

- Nó giữ cho work-space của bạn sạch sẽ hơn khi bạn xóa môi trường mà ảnh hưởng đến các phần khác

- Docker Client: là cách mà bạn tương tác với docker thông qua command trong terminal Docker Client sẽ sử dụng API gửi lệnh tới Docker Daemon

- Docker Daemon: là server Docker cho yêu cầu từ Docker API Nó quản lý images, containers, networks và volume

- Docker Volumes: là cách tốt nhất để lưu trữ dữ liệu liên tục cho việc sử dụng và tạo apps

A Docker Registry is a private storage solution for Docker Images, where users can push their images and pull them as needed You can utilize your own registry or opt for those provided by cloud service providers such as AWS, Google Cloud, or Microsoft Azure.

- Docker Hub: là Registry lớn nhất của Docker Images ( mặc định) Có thể tìm thấy images và lưu trữ images của riêng bạn trên Docker Hub ( miễn phí)

- Docker Repository: là tập hợp các Docker Images cùng tên nhưng khác tags VD: golang:1.11-alpine

- Docker Networking: cho phép kết nối các container lại với nhau Kết nối này có thể trên 1 host hoặc nhiều host

Docker Compose là công cụ giúp bạn dễ dàng chạy ứng dụng với nhiều Docker containers Nó cho phép cấu hình các lệnh trong file docker-compose.yml để sử dụng lại, và được cài đặt sẵn khi bạn cài Docker.

- Docker Swarm: để phối hợp triển khai container

Docker Services are essential for managing containers in production environments Each service runs a single image, but it encodes the configuration for how that image should operate, including the ports to use and the number of container replicas needed to ensure optimal performance and immediate scalability.

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

KHẢO SÁT MỘT SỐ TRANG WEB

2.1.1 Wordpress (http://www.wordpress.com)

Hình 1 Trang chủ của wordpress

Hình 2 Trang chọn theme của template

Hình 3 Trang quản lý site của wordpress

- Trang chủ đơn giản, tập trung vào việc hướng người dùng tạo 1 website

- Bố trí các chức năng hợp lý, dễ sử dụng

- Thiết kế trang web responsive giúp hiển thị thích hợp ở nhiều chế độ màn hình (Desktop, Tablet, Mobile)

- Hệ thống quản lý đầy đủ, cài đặt plugin nhanh chóng

- Có tool báo cáo về lượng traffic của web

- Có thể thiết kế lại site theo template hoặc tự custom theo ý bản thân

- Cung cấp nhiều plugin hỗ trợ về SEO, Security, Notification, ads ,…

- Các chức năng đòi hỏi có kiến thức nhất định để sử dụng

2.1.2 Wix (https://www.wix.com)

Hình 4 Trang quản lý site của wix

Hình 5 Trang danh sách template của wix

Hình 6 Trang chỉnh sửa giao diện của wix

- Thiết kế đẹp, tinh tế

- Bố trí các danh mục, chức năng khá hợp lý

- Trang chỉnh sửa và thiết kế website có nhiều widget và layout dựng sẵn

- Có các mẫu template đa dạng

- Có chatbot hỗ trợ tự động

- Hỗ trợ hosting website bằng domain mới và domain đã có

- Cho phép thiết kế website bằng cách kéo thả

- Tạo được website responsive tương thích với nhiều device: mobile, tablet, desktop

- Có tool hỗ trợ thanh toán online

- Có tool quản lý, phân tích, thống kế

- Hỗ trợ tạo database riêng

- Hỗ trợ mail server riêng

- Chưa hỗ trợ hiển thị trên thiết bị di động (tablet, mobile)

- Tốc độ load trang web hơi chậm, đặc biệt là trang chỉnh sửa và thiết kế website

2.1.3 Weebly (http://www.weebly.com)

Hình 7 Trang quản lý site của weebly

Hình 8 Trang thiết kế giao diện của weebly

Hình 9 Trang chủ của weebly

- Giao diện đơn giản, dễ sử dụng

- Bố trí các chức năng khá hợp lý, dễ sử dụng

- Có các mẫu template đa dạng

- Hỗ trợ hosting website bằng domain mới và domain đã có

- Cho phép thiết kế website bằng cách kéo thả

- Tạo được website responsive tương thích với nhiều device: mobile, tablet, desktop

- Có tool quản lý, phân tích, thống kế

- Trang chỉnh sửa và thiết kế website không hiển thị chính xác trên thiết bị mobile/tablet

- Chưa hỗ trợ thanh toán online cho các website bán hàng

- Tốc độ load trang web chậm, đặc biệt là trang chỉnh sửa, thiết kế website

2.2 KẾT LUẬN VỀ NHỮNG TIÊU CHÍ WEBSITE CẦN ĐẠT ĐƯỢC

2.1.4 Những ưu điểm cần học

- Chức năng kéo thả mượt mà, không giật, không lag

- Các component để thiết kế phải đa dạng

- Bố trí các chức năng hợp lý cho người dùng

- Có tool quản lý cho khách hàng để quản lý website của riêng mình

- Có nhiều mẫu template đa dạng, để người dùng thay vì thiết kế từ đầu có thể tạo cái mới dựa trên mẫu có sẵn

- Chạy website của khách hàng trên subdomain

- Có chức năng thanh toán

2.1.5 Những nhược điểm cần khắc phục

- Responsive trang web trên mọi thiết bị

- Ngay cả người dùng không biết gì về công nghệ cũng có thể sử dụng

MÔ HÌNH HÓA YẾU CẦU VÀ THIẾT KẾ CƠ SỞ DỮ LIỆU

USE CASE DIAGRAM

Hình 10 Sơ đồ use case diagram

CHI TIẾT CÁC ACTOR

Quy định Biểu mẫu Ghi

1 Đăng ký Lưu trữ QD_DangKy BM_DangKy

2 Đăng nhập Tra cứu QD_DangNhap BM_DangNhap

Mô phỏng QD_XemTrangC hu

Mô phỏng QD_XemTrangT emplate

Mô phỏng QD_PreviewTem plate

Lưu trữ QD_YeuCauHoT ro

Bảng 1 Bảng nghiệp vụ của guest

STT Mã quy định Tên quy định

1 QD_DangKy Đăng ký Nhập email, SĐT, họ tên, địa chỉ, password và xác nhận password sau đó nhấn nút đăng ký để tạo tài khoản

Hệ thống lưu trữ thông tin người dùng vào cơ sở dữ liệu, trong đó mật khẩu được mã hóa theo chuẩn BCrypt Sau khi hoàn tất đăng ký, tài khoản của khách hàng sẽ được chuyển đến trang đăng nhập.

2 QD_DangNhap Đăng nhập Nhập username (email) và password để đăng nhập vào hệ thống

Sau khi kiểm tra username và password hệ thống sẽ gọi đến giao diện trang chủ

Nếu dữ liệu nhập sai, sẽ có thông báo từ hệ thống để kiểm tra lại thông tin

Để đổi mật khẩu, người dùng cần chọn chức năng “Quên mật khẩu” và nhập địa chỉ email của tài khoản Sau đó, một liên kết để đổi mật khẩu sẽ được gửi đến email đã đăng ký.

Người dùng truy cập link đó để đổi mật khẩu

Sau khi đổi mật khẩu, người dùng được chuyển đến trang đăng nhập

Truy cập vào trang web designwebx.online để xem trang chủ

Người dùng đang ở trang chủ, click vào nút template để thấy danh sách template

Khi thấy danh sách template, người dùng click vào template muốn preview, trang sẽ preview ra template

Người dùng có thể gửi yêu cầu hỗ trợ thông qua form, admin sẽ đọc nó và liên hệ lại sau

Bảng 2 Bảng quy định của guest

3.2.1.3 Danh sách các biểu mẫu

Hình 11 Biểu mẫu đăng ký

Hình 12 Biểu mẫu đăng nhập

Hình 13 Biểu mẫu quên mật khẩu

Hình 14 Biểu mẫu xem trang chủ

Hình 15 Biểu mẫu xem trang template

Hình 16 Biểu mẫu preview template

Hình 17 Biểu mẫu yêu cầu hỗ trợ

1 Đăng xuất Mô phỏng QD_DangXuat

2 Tạo website Lưu trữ QD_TaoWebsi te

Tra cứu QD_ChonTem plate

Lưu trữ, tra cứu QD_QuanLyW ebsite

Lưu trữ, tra cứu QD_QuanLyS anPham

Lưu trữ, tra cứu QD_QuanLyD onHang

Lưu trữ, tra cứu QD_QuanLyN guoiDung

10 Quản lý yêu cầu hỗ trợ

Lưu trữ, tra cứu QD_QuanLyY euCauHoTro

14 Lưu page Tra cứu, mô phỏng

Mô phỏng QD_PreviewW ebsite

Mô phỏng QD_ThaoTacC omponent

Tra cứu, lưu trữ QD_QuanLyPr ofile

Mô phỏng QD_XemTran gChu

Mô phỏng QD_PreviewT emplate

Mô phỏng QD_XemTran gTemplate

21 Thanh toán Tính toán, lưu trữ

Bảng 3 Bảng nghiệp vụ của user

STT Mã quy định Tên quy định Mô tả Ghi chú

1 QD_DangXua t Đăng xuất Sau khi người dùng đăng nhập, họ có thể đăng xuất bằng cách click nút

“Log out” ở menu góc trên bên phải

Tạo website Người dùng có thể tạo website bằng cách nhấn nút tạo website và đi qua 2 nghiệp vụ sau:

Chọn template Màn hình hiển thị ra danh sách các template website cho người dùng chọn

Cấu hình website Đây là 1 bước trong quá trình tạo website Ở đây, người dùng có thể cài đặt tên trang web, logo, rồi click button

Lúc này website đã được tạo ra, cùng với các page (mặc định hoặc theo template)

Quản lý website Người dùng sau khi đăng nhập, chọn quản lý website ở menu góc trên bên

28 trái Trang sẽ show ra danh sách các website của người

Sau đó người dùng có thể chọn website cần quản lý

Quản lý database của website Khi đang ở trang quản lý website, người dùng có thể chọn website cần quản lý database bằng cách nhấn nút Manage

Trang sẽ chuyển hướng đến app quản lý database website

Quản lý sản phẩm -Hiển thị danh sách các sản phẩm để xem -Người dùng có thể thêm, sửa hoặc xóa sản phẩm trên mỗi record

Quản lý đơn hàng -Hiển thị danh sách các đơn hàng

-Người dùng có thể “confirm” đối với từng đơn hàng

-Hiển thị danh sách người dùng để xem

- có thể xem, sửa thông tin người dùng trên mỗi record

Quản lý yêu cầu hỗ trợ

-Hiển thị danh sách các yêu cầu hỗ trợ để xem

Setting website Bao gồm các update về website như name, logo, theme

Thiết kế giao diện Nghiệp vụ này có thể thực hiện khi:

+ Người dùng lần đầu thực hiện tạo website, sau đó tới bước tiếp theo sẽ thiết kế giao diện

+ Người dùng đang ở trang quản lý website thì họ có thể sửa lại giao diện website bằng cách click nút

Chuyển hướng người dùng đến trang thiết kế

13 QD_LuuPage Lưu Page Sau khi thiết kế xong , nếu người dùng muốn lưu lại thì click “save page”

Nếu save thành công sẽ nhận được một thông báo thành công

Thao tác kéo thả các component như Test, Carouser, Image, button , vô trang web

Chỉnh sửa định dạng của từng component

Preview website Nó mô phỏng cho người dùng giao diện đang thiết kế ở các thiết bị khác nhau

Deploy website Nghiệp vụ này có thể thực hiện khi người dùng đang trong quá trình

Sau khi thiết kế xong, người dùng save lại và có thể deploy bằng cách nhấn nút “publish”

Chức năng này giúp triển khai website mà khách hàng đã tạo lên internet

Quản lý profile Người dùng sau khi đăng nhập,chọn

“profile”,sau đó người dùng sẽ thấy thông tin cá nhân

Người dùng có thể update lại thông tin cá nhân

Khi người dùng triển khai website lần đầu, hệ thống sẽ yêu cầu họ kích hoạt trang web thông qua việc thanh toán bằng Momo.

Yêu cầu hỗ trợ Người dùng có thể gửi yêu cầu hỗ trợ thông qua form, admin sẽ đọc nó và liên hệ lại sau

Bảng 4 Bảng quy định của user

3.2.2.3 Danh sách các biểu mẫu

BM_XemTrangTemplate: Giống BM_XemTrangTemplate của Guest

Hình 18 Biểu mẫu cấu hình website

Hình 19 Biểu mẫu quản lý website

Hình 20 Biểu mẫu quản lý sản phẩm BM_ QuanLyDonHang

Hình 21 Biểu mẫu quản lý đơn hàng

Hình 22 Biểu mẫu quản lý user

Hình 23 Biểu mẫu quản lý yêu cầu hỗ trợ

Hình 24 Biểu mẫu setting website

Hình 25 Biểu mẫu thiết kế giao diện

Hình 26 Biểu mẫu quản lý profile

Hình 27 Biểu mẫu trang thanh toán

BM_PreviewWebsite: Giống BM_PreviewTemplate của guest

BM_XemTrangChu: Giống BM_XemTrangChu của guest

BM_YeuCauHoTro: Giống BM_YeuCauHoTro của guest

3 Quản lý yêu cầu hỗ trợ

Bảng 5 Bảng nghiệp vụ của admin

STT Mã quy định Tên quy định Mô tả Ghi chú

Sau khi đăng nhập vào ứng dụng quản lý, admin có thể truy cập vào mục quản lý người dùng, nơi họ có khả năng xem và chỉnh sửa danh sách người dùng trong hệ thống.

Admin quản lý danh sách website

Sau khi đăng nhập vào ứng dụng quản lý, admin chọn mục quản lý website để xem danh sách các website mà người dùng đã tạo Tại đây, admin có thể dễ dàng khởi động hoặc dừng hoạt động của từng website.

Admin quản lý yêu cầu hỗ trợ bằng cách đăng nhập vào ứng dụng quản lý và chọn mục quản lý support Tại đây, họ có thể xem, sửa và xóa danh sách các yêu cầu hỗ trợ từ người dùng.

Bảng 6 Bảng quy định của admin

Hình 28 Biểu mẫu admin quản lý user

Hình 29 Biểu mẫu admin xem chi tiết user

Hình 30 Biểu mẫu admin quản lý website

Hình 31 Biểu mẫu admin xem chi tiết website

Hình 32 Biểu mẫu admin quản lý yêu cầu hỗ trợ

Hình 33 Biểu mẫu admin xem chi tiết yêu cầu hỗ trợ

SƠ ĐỒ LUỒNG DỮ LIỆU VÀ CƠ SỞ DỮ LIỆU CÁC NGHIỆP VỤ

3.3.1.1 Đăng kí a Sơ đồ luồng dữ liệu b Mô tả cơ sở dữ liệu

D1: Thông tin người dùng (name,password,email,phone,gender,address,country) D2: Không có

D6: Thông báo người dùng đã tạo thành công c Thuật toán

B1: Hiện form đăng kí cho người dùng nhập

B3: Kiểm tra email đã tồn tại chưa:

- Nếu tồn tại rồi: chuyển đến B4 Đăng kí Guest

Thiết bị nhập Thiết bị xuất

+ Thông báo “Email đã tồn tại”

B4: Lưu thông tin tài khoản vào CSDL

B6: Kết thúc d Thiết kế cơ sở dữ liệu

+ USER (name, password, email, phone, gender, address, country)

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

Hình 34 CSDL tại nghiệp vụ đăng kí của guest

3.3.1.2 Đăng nhập a Sơ đồ luồng dữ liệu b Mô tả cơ sở dữ liệu

D1: Thông tin đăng nhập (email, password)

D3: Thông tin user(username,password,email,phone,gender,country)

D6: Thông báo người dùng đăng nhập thành công hoặc thất bại c Thuật toán

B1: Hiện form đăng nhập cho người dùng

B4: kiểm tra username có tồn tại trong CSDL hay không

- Nếu có: tới B5 Đăng nhập Guest

+ Thông báo đăng nhập thất bại

B5: Mã hóa mật khẩu người dùng nhập và so sánh với mật khẩu đã lưu:

+ Thông báo đăng nhập thất bại

B6: Thông báo đăng nhập thành công cho user

- Các thuộc tính mới: Không có

3.3.1.3 Quên mật khẩu a Sơ đồ luồng dữ liệu

43 b Mô tả cơ sở dữ liệu

D1: Email lấy mật khẩu và mật khẩu mới (email password)

- Thông tin của user (password,email,phone,gender,country)

- Template notification (slug type text subject html)

- Notification (type template text to data email phone subject html result) D5: Email chứa link đổi mật khẩu

D6: Thông báo tới người dùng c Thuật toán

B1: Hiện form nhập email để đặt lại mật khẩu

B2: Lấy email từ form đăng nhập

B4: Lấy từ CSDL các thông tin sau:

- Thông tin user (_id, name, email, password, phone, gender, country) B5: Kiểm tra người dùng có tồn tại hay không?

- Không: thông báo “Không tìm thấy tài khoản của bạn”

B6: Tạo json web token có hiệu lục 5 phút dựa trên password cũ và _id

B7: Lấy ra data templateNotification có slug email-user-change-password

B8: Tạo 1 record notifcation và ghi xuống CSDL

B9: Sau khi người dùng nhấn vào link lấy mật khẩu, chuyển người dùng đến form đặt lại mật khẩu

B10: Hiện form nhập mật khẩu

B11: Lấy giá trị mật khẩu, mật khẩu nhập lại và token

B12: Kiểm tra mã token còn hiệu lực hay không?

- Không: thông báo “Mã xác thực đã hết hạn”

B13: Mã hóa mật khẩu mới và lưu vào CSDL

B14: Chuyển người dùng đến form đăng nhập

+ TemplateNotification (slug type text subject html)

+ Notification (type template text to data email phone subject html result)

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

Hình 35 CSDL tại nghiệp vụ quên mật khẩu của guest

3.3.1.4 Xem trang chủ a Sơ đồ luồng dữ liệu b Mô tả cơ sở dữ liệu

D6: Hiện trang chủ cho người dùng c Thuật toán

B1: Người dùng yêu cầu xem trang chủ

B2: Hiện trang chủ cho người dùng

3.3.1.5 Xem trang template a Sơ đồ luồng dữ liệu b Mô tả cơ sở dữ liệu

D3: Danh sách các mẫu website template (name description image website) D4: Không có

D6: Hiện trang template cho người dùng c Thuật toán

B1: Người dùng yêu cầu xem trang chủ

B3: Lấy ra danh sách các template (name image description website)

B5: Hiện trang chủ cho người dùng

+ TemplateWebsite (name, image,description, website)

Hình 36 CSDL tại nghiệp vụ xem trang template của guest

3.3.1.6 Preview template a Sơ đồ luồng dữ liệu

Website, TemplateWebsite, Page, Section, Element,

D1: Mã template (_id), mã page(_id)

- Website (name meta theme template logo user header footer port apiKey published useTemplate template)

- Page (name sections state website homepage dynamicData)

- Section (elements dataString type order state generatedHtml)

- Element (component type dataString order generatedHtml)

- Component (name slug type handlebarHtml vueHtml dataString order state)

D6: Preview template cho người dùng c Thuật toán

B1: Nhận yêu cầu preview website template từ người dùng

B4: Lấy ra thông tin website ứng với template

B5: Lấy ra danh sách các page thuộc website mới lấy ra

B6: Hiển thị danh sách các pages để người dùng preview

B7: Nhận yêu cầu preview page từ người dùng

B9: Lấy ra các sections, elements, component

B10: Preview page cho người dùng

B11: Đóng kết nối cơ sở dữ liệu

+ Page (name sections state website homepage dynamicData)

+ Section (elements dataString type order state generatedHtml)

+ Element (component type dataString order generatedHtml)

+ Component (name slug type handlebarHtml vueHtml dataString order state) + Website (name meta theme template logo user theme header footer port apiKey)

Hình 37 CSDL tại nghiệp vụ preview template của guest

3.3.1.7 Yêu cầu hỗ trợ a Sơ đồ luồng dữ liệu b Mô tả cơ sở dữ liệu

D1: Thông tin Support(name email phone question)

D6: Hiển thị thông báo tới người dùng c Thuật toán

B1: Nhận yêu cầu hỗ trợ từ người dùng

B3: Tạo 1 record trong bảng Support

Yêu cầu hỗ trợ Guest

B6: Thông báo đã gửi yêu cầu thành công tới người dùng d Thiết kế cơ sở dữ liệu

+ Support(name email phone question)

Hình 38 CSDL tại nghiệp vụ yêu cầu hỗ trợ của guest

3.3.2 Các nghiệp vụ của User

Sau khi người dùng đăng nhập, họ có thể thực hiện tất cả các nghiệp vụ của khách như xem trang chủ, xem trang mẫu, xem trước mẫu và yêu cầu hỗ trợ, cùng với các nghiệp vụ khác.

3.3.2.1 Đăng xuất a Sơ đồ luồng dữ liệu b Mô tả cơ sở dữ liệu

D6: Chuyển người dùng đến trang chủ c Thuật toán

B1: Người dùng yêu cầu đăng xuất

B2: Xóa user trong cookie Đăng xuất

3.3.2.3 Chọn template a Sơ đồ luồng dữ liệu b Mô tả cơ sở dữ liệu

D3: Danh sách các template website cho người dùng chọn

D6: Tới bước cấu hình website

B1: Người dùng nhấn nút tạo webite

B3: Lấy danh sách template từ CSDL

B4: Hiển thị danh sách template cho người dùng chọn

3.3.2.4 Cấu hình website a Sơ đồ luồng dữ liệu b Mô tả cơ sở dữ liệu

D1: Thông tin website( name logo user theme template)

D6: Chuyển tới bước thiết kế website c Thuật toán

B1: Hiển thị form nhập thông tin website cho người dùng (name logo) cùng với template người dùng đã chọn từ nghiệp vụ chọn template

B6: Thông báo cho người dùng tạo website thành công và tới bước thiết kế website

+ Theme (name devCDN productCDN state)

Hình 39 CSDL tại nghiệp vụ cấu hình website của user

3.3.2.5 Quản lý website a Sơ đồ luồng dữ liệu b Mô tả cơ sở dữ liệu

D3: Danh sách website của người dùng

D6: Hiện ra danh sách website của người dùng c Thuật toán

B1: Nhận yêu cầu quản lý website của người dùng

B4: Lấy ra danh sách website từ D1

B6: Hiện ra danh sách website của người dùng

3.3.2.6 Quản lý database website a Sơ đồ luồng dữ liệu b Mô tả cơ sở dữ liệu

D1: Mã webite và mã user (_id website, _id user)

D3: Thông tin website và user

D6: Chuyển người dùng tới trang quản lý database website của họ

Quản lý database website User

B1: Nhận yêu cầu quản lý database website của người dùng

B3: Lấy D1 và kiểm tra xem người dùng này có quyền quản lý website này không:

+ Thông báo lỗi “Bạn không có quyền quản lý website này”

B4: Tạo ra 1 token jwt từ api_key của website(mỗi website có 1 api_key) , và trả ra cho người dùng

B5: Chuyển user tới app quản lý website của họ, họ phải dùng token vừa được trả ra thì mới có quyền thêm sửa xóa

3.3.2.7 Quản lý sản phẩm a Sơ đồ luồng dữ liệu b Mô tả cơ sở dữ liệu

- Thêm: thông tin sản phẩm (name price state description quantity images)

- Sửa: thông tin sản phẩm (_id name price state description quantity images)

- Xóa: mã sản phẩm (_id)

- Xem: Danh sách sản phẩm(name price state description quantity images)

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

D6: Thông báo cho người dùng c Thuật toán

B1: nhận yêu cầu xem sản phẩm từ người dùng

B1: nhận yêu cầu thêm sản phẩm từ người dùng

B1: nhận yêu cầu sửa sản phẩm từ người dùng

B2: Nhận thông tin Product cần sửa

B5: Cập nhật thông tin của Product cần sửa xuống CSDL

B1: Nhận yêu cầu xóa product

+ Product (name price state description quantity images)

Hình 40 CSDL tại nghiệp vụ quản lý sản phẩm của user

3.3.2.8 Quản lý đơn hàng a Sơ đồ luồng dữ liệu b Mô tả cơ sở dữ liệu

- Sửa: Mã và trạng thái đơn hàng (_id status)

+ Danh sách sản phẩm(name price state description quantity images) + Danh sách đơn hàng (name orderdDate total note phone status address)

+ OrderItem (order product quantity price)

Quản lý đơn hàng User

B1: nhận yêu cầu xem đơn hàng từ người dùng

B4: Lấy ra danh sách đơn hàng từ bảng Order , OrderItem, Product

B6:Trả kết quả ra cho người dùng

B1: nhận yêu cầu sửa trạng thái đơn hàng từ người dùng

+ Order (name orderedDate total note phone status address)

+ OrderItem (order product quantity price)

Hình 41 CSDL tại nghiệp vụ quản lý đơn hàng của user

3.3.2.9 Quản lý người dùng a Sơ đồ luồng dữ liệu b Mô tả cơ sở dữ liệu

- Sửa: Mã và thông tin user (_id name address gender phone)

Quản lý người dùng User

+ Danh sách user(name address email phone)

B1: nhận yêu cầu xem danh sách người dùng từ user

B4: Lấy ra danh sách người dùng từ bảng User

B1: nhận yêu cầu sửa thông tin người dùng từ user

Hình 42 CSDL tại nghiệp vụ quản lý người dùng của user

3.3.2.10 Quản lý yêu cầu hỗ trợ a Sơ đồ luồng dữ liệu b Mô tả cơ sở dữ liệu

Quản lý yêu cầu hỗ trợ người dùng User

- Xem: Danh sách yêu cầu hỗ trợ Support(name phone email question) D4:

B1: nhận yêu cầu xem danh sách yêu cầu hỗ trợ từ user

B4: Lấy ra danh sách yêu cầu hỗ trợ từ bảng Support

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

Hình 43 CSDL tại nghiệp vụ quản lý yêu cầu hỗ trợ của user

3.3.2.11 Thiết kế giao diện a Sơ đồ luồng dữ liệu b Mô tả cơ sở dữ liệu

Thiết kế giao diện User

- Danh sách Component(name slug type vueHtml)

- Website(name theme header footer port template)

- Page(sections state name type website home page)

- Component(name slug type vueHtml state)

D6: Chuyển người dùng tới trang thiết kế giao diện c Thuật toán

B6: Hiển thị danh sách các page cho người dùng thiết kế

3.3.2.12 Deploy website a Sơ đồ luồng dữ liệu b Mô tả cơ sở dữ liệu

D3: Thông tin website(port apiKey)

D6: Link truy cập trang web c Thuật toán

B1: Nhận yêu cầu deploy website

B3: Lấy thông tin website từ D1

B4: Tạo một thư mục chung để chứa source code của website cần deploy

B5: Copy giao diện và file config tới thư mục này

B6: Copy server tới thư mục này

B9: Thông báo đã deploy thành công hoặc thất bại

- Các thuộc tính mới : Không có

3.3.2.13 Lưu page a Sơ đồ luồng dữ liệu b Mô tả cơ sở dữ liệu

- Thông tin page(name sections state homepage website dynamicData)

- Danh sách section(element dataString type order state)

- Danh sách element(component type order dataString)

Website, Page, Section, Element, Layout,

- Thông tin Layout(name slug html)

- Thông tin Theme(name devCDN productCDN state)

D6: Thông báo người dùng đã lưu page thành công c Thuật toán

B1: Tiếp nhận yêu cầu lưu page từ người dùng

B4: Xóa hết các element, section thuộc page cũ

B5: Lấy ra Layout page và lay out section từ bảng Layout

B7: Tạo section từ element vừa tạo và layout section dùng để render html section

B8: Cập nhật lại section trong page và layout page dùng để render html page B9: Tạo ra file html của page này thông qua html vừa mới render

B11: Thông báo người dùng đã lưu page thành công

Hình 44 CSDL tại nghiệp vụ lưu page của user

3.3.2.14 Preview website a Sơ đồ luồng dữ liệu

Website, Page, Section, Element, Component,

D1: Mã website (_id) và mã page (_id)

- Website (name meta theme template logo)

- Page (name sections state website homepage dynamicData)

- Section (elements dataString type order state generatedHtml)

- Element (component type dataString order generatedHtml)

- Component (name slug type handlebarHtml vueHtml dataString order state)

B1: Nhận yêu cầu preview website từ người dùng

B4: Lấy ra thông tin website

B5: Lấy ra danh sách các page thuộc website mới lấy ra

B6: Hiển thị danh sách các pages để người dùng preview

B7: Nhận yêu cầu preview page từ người dùng

B9: Lấy ra các sections, elements, component

B10: Preview page cho người dùng

B11: Đóng kết nối cơ sở dữ liệu

B12: Kết thúc d Thiết kế cơ dữ liệu

3.3.2.15 Thao tác với components a Sơ đồ luồng dữ liệu b Mô tả cơ sở dữ liệu

D2: Kéo thả từ component từ người dùng

D6: Giao diện phải thay đổi theo cách người dùng tương tác c Thuật toán

B1: Người dùng kéo thả để thêm hoặc xóa các component ở trang thiết kế giao diện, ngoài ra còn chỉnh sửa định dạng của từng component

B2: Giao diện sẽ cập nhật theo ý người dùng

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

3.3.2.16 Quản lý profile a Sơ đồ luồng dữ liệu b Mô tả cơ sở dữ liệu

- Sửa: Mã User và thông tin muốn sửa của User(name email password phone gender address data)

- Xem: Thông tin User (name email phone gender address data)

- Xem: Hiện thông tin user cho người dùng

- Sửa: Thông báo thành công hoặc thất bịa cho người dùng c Thuật toán

B1: nhận yêu cầu xem profile từ người dùng

B3: Lấy ra thông tin User(name email phone gender address data)

B5: Hiển thị thông tin profile cho người dùng

B1: Nhận yêu cầu sửa thông tin profile từ người dùng

B6: Kết thúc thuật toán d Thiết kế cơ sở dữ liệu

3.3.2.17 Thanh toán a Sơ đồ luồng dữ liệu b Mô tả cơ sở dữ liệu

- PaymentRequest(website, amount, result, requestId, signature, payUrl, expired)

- Payment(request, amount, result, transId, responseTime, errorCode, message, localMessage, extraData, signature, payType)

D6: Chuyển hướng người dùng về trang thiết kế c Thuật toán

B1: nhận yêu cầu thanh toán từ người dùng

B3: Lấy ra thông tin Website(active name)

B4: Tạo một record PaymentRequest(website, amount, result, requestId, signature, payUrl, expired), lúc này sẽ có một link thanh toán momo được tạo ra

B5: Redirect người dùng đến link thanh toán này

B6: Người dùng thực hiện thanh toán

B7: Momo sẽ gửi dữ liệu thanh toán này và chúng ta sẽ lưu vào bảng Payment(request, amount, result, transId, responseTime, errorCode, message, localMessage, extraData, signature, payType)

B8: Chuyển hướng người dùng trở lại trang thiết kế website d Thiết kế cơ sở dữ liệu

+ PaymentRequest(website, amount, result, requestId, signature, payUrl, expired)

+ Payment(request, amount, result, transId, responseTime, errorCode, message, localMessage, extraData, signature, payType)

Hình 45 CSDL tại nghiệp vụ thanh toán của user

3.3.3 Các nghiệp vụ của Admin

3.3.3.1 Quản lý người dùng a Sơ đồ luồng dữ liệu

Quản lý người dùng Admin

- Sửa: thông tin người dùng (name gender phone)

- Xem: Danh sách sản phẩm(name gender phone email createdAt)

D6: Hiển thị hoặc thông báo cho người dùng c Thuật toán

B1: nhận yêu cầu xem danh sách người dùng từ Admin

B3: Lấy danh sách người dùng ra

B1: nhận yêu cầu sửa thông tin user từ admin

B2: Nhận thông tin User cần sửa

B5: Cập nhật thông tin của User cần sửa xuống CSDL

- Các thuộc tính mới: không có

3.3.3.2 Quản lý website a Sơ đồ luồng dữ liệu b Mô tả cơ sở dữ liệu

D6: Thông báo cho admin c Thuật toán

B1: nhận yêu cầu xem danh sách website từ Admin

B1: nhận yêu cầu deploy website từ admin

B5: Thực hiện deploy website này

B1: nhận yêu cầu deploy website từ admin

B5: Thực hiện deploy website này

B1: nhận yêu cầu stop website từ admin

B5: Thực hiện stop website này

3.3.3.3 Quản lý yêu cầu hỗ trợ a Sơ đồ luồng dữ liệu

Quản lý yêu cầu hỗ trợ Admin

- Xem: Danh sách yêu cầu hỗ trợ Contact(name phone email status question)

D6: Hiển thị hoặc thông báo cho người dùng e Thuật toán

B1: nhận yêu cầu xem danh sách yêu cầu hỗ trợ từ Admin

B5: Kết thúc thuật toán f Thiết kế cơ sở dữ liệu

CƠ SỞ DỮ LIỆU CUỐI CÙNG

3.4.1.1 Cơ sở dữ liệu chính

Hình 46 Cơ sở dữ liệu cuối cùng

3.4.1.2 Cơ sở dữ liệu của website mà khách hàng tạo

Hình 47 Cơ sở dữ liệu của website khách hàng tạo

3.4.2 Mô tả cơ sở dữ liệu chính

3.4.2.1 Bảng USER dùng để lưu thông tin của user

STT Tên thuộc tính Mô tả Kiểu dữ liệu Ghi chú

2 name Tên của user String

3 email Email của user String

4 password Password được mã hóa của user String

5 phone Số điện thoại của user String

7 address Địa chỉ của user String

8 country Đất nước đang sống String

Bảng 7 Bảng mô tả dữ liệu của user

3.4.2.2 Bảng WEBSITE dùng để lưu thông tin của các website

2 name Tên của website String

3 logo Link ảnh là logo website String

4 user User đã tạo website này ObjectId

5 theme Chủ để của website ObjectId

6 header Phần header của website ObjectId

7 footer Phần footer của website ObjectId

8 port Port khi mà website này publish Number

9 apiKey Key để tạo ra jwt, cho user quản lý website của mình

10 published Website này đang được publish hay chưa

11 useTemplate Website này có sử dụng templat e hay không

12 template Template mà website này sử dụng ObjectId

Bảng 8 Bảng mô tả dữ liệu của website

3.4.2.3 Bảng PAGE dùng để lưu thông tin của các page

3 sections Danh sách các sections của page [ObjectId]

4 state Trạng thái của page String

5 website Page này thuộc website nào ObjectId

6 homepage Page này có phải homepage không

Bảng 9 Bảng mô tả dữ liệu của page

3.4.2.4 Bảng SECTION dùng để lưu thông tin của các section

2 elements Danh sách các element thuộc section này

3 dataString Data cho việc render String

4 type Custom hay template String

6 state Section này có đang hoạt động không

7 generatedHtml Html tạo ra từ section này String

Bảng 10 Bảng mô tả dữ liệu của section

3.4.2.5 Bảng ELEMENT dùng để lưu thông tin của các element

2 component Là component nào ObjectId

3 type Thuộc loại component nào String

4 dataString Data cho việc render generatedHtml

5 generatedHtml Html tạo ra từ element này String

Bảng 11 Bảng mô tả dữ liệu của element

3.4.2.6 Bảng COMPONENT dùng để lưu thông tin của các component

2 name Tên của component String

3 slug Key của component String

4 type Loại của component như menu, title,

5 handlebarHtml Dùng để render ra html String

6 vueHtml Dùng để hiện thị ra giao diện chỉnh sửa

7 dataString Mẫu object data để render ra generatedHtml

9 state Component này có được đưa ra để sử dụng hay không

Bảng 12 Bảng mô tả dữ liệu của component

3.4.2.7 Bảng COMPONENT_TYPE dùng để lưu thông tin của type component

Bảng 13 Bảng mô tả dữ liệu của component_type

3.4.2.8 Bảng LAYOUT dùng để lưu thông tin của các layout

4 html Đoạn mã html của layout String

Bảng 14 Bảng mô tả dữ liệu của layout

3.4.2.9 Bảng THEME dùng để lưu thông tin của các theme

Bảng 15 Bảng mô tả dữ liệu của user game

3.4.2.10 Bảng TEMPLATE_WEBSITE dùng để lưu thông tin của các website

4 image Ảnh đại diện String

5 website Ref tới website ObjectId

Bảng 16 Bảng mô tả dữ liệu template_website

3.4.2.11 Bảng TEMPLATE_NOTIFICATION dùng để lưu thông tin của các template notification

3 type Loại template, gồm sms và email String

4 text Dành cho type là sms String

5 subject Dành cho type là email, chủ đề mail String

6 html Dành cho type là email, nội dung mail

Bảng 17 Bảng mô tả dữ liệu của template_notification

3.4.2.12 Bảng NOTIFICATION dùng để lưu thông tin của các notification

2 type Loại notification: email hoặc sms String

3 template Gắn với template notification ObjectId

4 text Nếu type là sms, đây là nội dung sms

5 to Ref tới User ObjectId

6 data Dữ liệu để render template String

7 email Email người nhận String

8 phone Số điện thoại người nhận String

9 subject Chủ đề mail String

10 html Nội dung mail String

11 result Kết quả notification String

Bảng 18 Bảng mô tả dữ liệu của notification

3.4.2.13 Bảng SUPPORT dùng để lưu thông tin của các support

1 _id Mã sản phẩm ObjectId

2 name Tên người dùng String

3 email Địa chỉ email String

4 phone Số điện thoại String

5 question Câu hỏi cần hỗ trợ String

Bảng 19 Bảng mô tả dữ liệu của support

3.4.2.14 Bảng PAYMENT dùng để lưu thông tin của các payment

2 request Ref tới Request ObjectId

4 Result Kết quả thanh toán momo Json

5 transId Mã giao dịch String

6 responseTime Thời gian thanh toán String

8 Message Mô tả kết quả giao dịch String

9 localMessage Mô tả kết quả giao dịch String

10 extraData Phần extra data String

12 payType Loại thanh toán String

Bảng 20: Bảng mô tả dữ liệu của payment

3.4.2.15 Bảng PAYMENT_REQUEST dùng để tạo link thanh toán momo

1 _id Mã Payment Request ObjectId

2 website Ref tới Website ObjectId

4 result Kết quả khi tạo link thanh toán momo

5 requestId Mã yêu cầu String

6 Signature Signature momo gửi về String

7 payUrl Link thanh toán momo String

8 expired Request này đã expired hay chưa Boolean

Bảng 21: Bảng mô tả dữ liệu của payment request

3.4.3 Mô tả cơ sở dữ liệu của website khách hàng

3.4.3.1 Bảng PRODUCT dùng để lưu thông tin của các product

2 name Tên sản phẩm String

3 price Giá sản phẩm Number

4 state Published hoặc draft String

6 quantity Số lượng tồn trong kho Number

Bảng 22 Bảng mô tả dữ liệu của product

3.4.3.2 Bảng ORDER dùng để lưu thông tin của các order

2 orderedDate Loại template, gồm sms và email Date

3 total Tổng giá tiền của đơn hàng Number

5 phone Số điện thoại người nhận String

6 status Pending,confirmed, deliveried,cancelled

7 address Địa chị nhận hàng String

8 name Tên khách hàng String

Bảng 23 Bảng mô tả dữ liệu của order

3.4.3.3 Bảng ORDER_ITEM dùng để lưu thông tin của các order item

1 _id Mã order item ObjectId

2 order Ref tới Order ObjectId

3 product Ref tới Product ObjectId

4 quantity Số lượng mua Number

5 price Đơn giá sản phẩm Number

Bảng 24 Bảng mô tả dữ liệu của order item

3.4.3.4 Bảng SUPPORT dùng để lưu thông tin của các support

4 phone Số điện thoại String

5 question Câu hỏi cần hỗ trợ String

Bảng 25 Bảng mô tả dữ liệu của support

3.4.3.5 Bảng USER dùng để lưu thông tin của các user

6 gender Số điện thoại String

7 phone Câu hỏi cần hỗ trợ String

Bảng 26 Bảng mô tả dữ liệu của user

THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ

CÁC MÀN HÌNH GIAO DIỆN CỦA GUEST

4.1.1.1 Mô tả đối tượng giao diện

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

4.1.1.2 Danh sách các đối tượng

STT Tên đối tượng GD Kiểu Ghi chú

Bảng 27 Mô tả đối tượng giao diện trang đăng nhập

4.1.1.3 Thiết giao diện và thiết kế xử lý

Hình 49 Xử lý giao diện đăng nhập

4.1.1.4 Lập danh sách các xử lý

STT Tên xử lý Điều kiện gọi thực hiện

1 Validate email Nhập dữ liệu vào ô input “Email”

2 Validate mật khẩu Nhập dữ liệu vào ô input “Mật khẩu”

3 Đăng nhập Click button “Login”, các ô dữ liệu không bị trống và chứa dữ liệu hợp lệ

Bảng 28 Bảng danh sách của xử lý đăng nhập

4.1.1.5 Mô tả xử lý: tương tự phần 3.3.1.2

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

Bảng 29 Mô tả đối tượng giao diện trang đăng ký

Hình 51 Xử lý giao diện đăng ký

1 Validate tên Nhập dữ liệu vào ô input “Name”

3 Validate số điện thoại Nhập dữ liệu vào ô input “Phone”

4 Chọn giới tính Click chọn vào combobox “Gender”

5 Validate mật khẩu Nhập dữ liệu vào ô input “Password”

6 Validate xác nhận mật khẩu Nhập dữ liệu vào ô input “ConfirmPassword”

7 Validate tên Nhập dữ liệu vào ô input “Name”

8 Đăng ký Click button "Register", các ô dữ liệu không bị chứa dữ liệu trống và dữ liệu hợp lệ

Bảng 30 Bảng danh sách của xử lý đăng ký

4.1.3 Màn hình quên mật khẩu

Hình 52 Giao diện quên mật khẩu

Bảng 31 Mô tả đối tượng giao diện trang quên mật khẩu

Hình 53 Xử lý giao diện đăng ký

2 Gửi yêu cầu khôi phục mật khẩu

Click button "Send", ô input email không bị chứa dữ liệu trống và dữ liệu hợp lệ

Bảng 32 Bảng danh sách của xử lý quên mật khẩu

4.1.4 Màn hình reset mật khẩu

Hình 54 Giao diện reset mật khẩu

Bảng 33 Mô tả đối tượng giao diện trang reset mật khẩu

Hình 55 Xử lý giao diện reset mật khẩu

2 Validate xác nhận mật khẩu Nhập dữ liệu vào ô input “ConfirmPassword”

3 Submit password mới Click button "Send", các ô input không bị chứa dữ liệu trống và dữ liệu hợp lệ

Bảng 34 Bảng danh sách của xử lý quên mật khẩu

4.1.5 Màn hình section header trang chủ

Hình 56 Giao diện section header trang chủ

Bảng 35 Mô tả đối tượng giao diện section header trang chủ

Hình 57 Xử lý giao diện section header trang chủ

Bảng 36 Bảng danh sách của xử lý section header trang chủ

4.1.6 Màn hình section service trang chủ

Hình 58 Giao diện section service trang chủ

Bảng 37 Mô tả đối tượng giao diện section header trang chủ

4.1.7 Màn hình section template trang chủ

Hình 59 Giao diện section template trang chủ

Bảng 38 Mô tả đối tượng giao diện section template trang chủ

4.1.8 Màn hình section about-us trang chủ

Hình 60 Giao diện section about us trang chủ

Bảng 39 Mô tả đối tượng giao diện section about us trang chủ

4.1.9 Màn hình section contact trang chủ

Hình 61 Giao diện section contact trang chủ

Bảng 40 Mô tả đối tượng giao diện section contact trang chủ

Hình 62 Xử lý giao diện section contact trang chủ

1 Validate name Nhập dữ liệu vào ô input “Name”

3 Validate số điện thoại Nhập dữ liệu vào ô input “Phone”

Bảng 41 Bảng danh sách của xử lý section header trang chủ

4.1.10 Màn hình section footer trang chủ

Hình 63 Giao diện section footer trang chủ

Bảng 42 Mô tả đối tượng giao diện section footer trang chủ

Hình 64 Giao diện trang chọn template

Bảng 43 Mô tả đối tượng giao diện trang chọn template

CÁC MÀN HÌNH GIAO DIỆN CỦA USER

The article outlines various essential sections for a webpage, including the "Section Header," which introduces the content, the "Section Service" that details the services offered, the "Section Template" for consistent layout design, the "Section About Us" that shares the company's background, the "Section Contact" for customer inquiries, and the "Section Footer" that provides additional information and links.

4.2.3 Màn hình khởi tạo website

Hình 65 Giao diện trang khởi tạo website

Bảng 44 Mô tả đối tượng giao diện trang khởi tạo website

Hình 66 Xử lý giao diện đăng nhập

1 Validate tên website Nhập dữ liệu vào ô input “Name website”

2 Upload hình ảnh Click vào nút “Upload logo”

3 Tạo website Click button “Create”, ô dữ liệu tên website không bị trống

Bảng 45 Bảng danh sách của xử lý đăng nhập

4.2.4 Màn hình kết quả tạo webiste

Hình 67 Giao diện trang kết quả tạo website

Bảng 46 Mô tả đối tượng giao diện trang kết quả tạo website

4.2.5 Màn hình quản lý danh sách các web

Hình 68 Giao diện trang danh sách các website

Bảng 47 Mô tả đối tượng giao diện trang quản lý danh sách website

4.2.6 Màn hình trang cấu hình website

Hình 69 Giao diện trang cấu hình website

Bảng 48 Mô tả đối tượng giao diện trang cấu hình webiste

4.2.7 Màn hình trang thiết kế website

Hình 70 Giao diện trang thiết kế website

Hình 71 Giao diện trang thiết kế website

Bảng 49 Mô tả đối tượng giao diện trang thiết kế website

Hình 72 Xử lý giao diện trang thiết kế website

Hình 73 Xử lý giao diện trang thiết kế website

1 Thay đổi theme website Click vào nút “Themes”, sau đó chọn theme

2 Lưu website Click vào nút “Save”

3 Preview website Click vào nút “Preview”

4 Publish website Click vào nút “Publish”

5 Kéo thả và thiết kế giao diện

Click và kéo component vào khung làm việc của website

Bảng 50 Bảng danh sách của xử lý thiết kế website

4.2.8 Màn hình trang quản lý database các website

Hình 74 Giao diện trang quản lý database các website

Bảng 51 Mô tả đối tượng giao diện quản lý database các website

Hình 75 Xử lý giao diện quản lý database các website

1 Logout Click vào nút “Logout”

Bảng 52 Bảng danh sách của xử lý quản lý database các website

4.2.9 Màn hình trang quản lý product

Hình 76 Giao diện trang quản lý product

Bảng 53 Mô tả đối tượng giao diện quản lý product

Hình 77 Xử lý giao diện trang quản lý product

1 Tìm sản phẩm theo tên Nhập từ khóa vào ô txtSearch

Bảng 54 Bảng danh sách của xử lý quản lý product

4.2.10 Màn hình trang quản lý chi tiết product

Hình 78 Giao diện trang quản lý chi tiết product

Bảng 55 Mô tả đối tượng giao diện quản lý chi tiết product

Hình 79 Xử lý giao diện trang quản lý chi tiết product

1 Xóa hình ảnh Click vào button “btnDeleteImage”

2 Thêm hình ảnh Click vào button “btnAddImage”

3 Xóa sản phẩm Click vào button “Delete”

4 Lưu sản phẩm Click vào button “Save”, các ô input không bị bỏ trống và chữa dữ liệu hợp lệ

Bảng 56 Bảng danh sách của xử lý quản lý chi tiết product

4.2.11 Màn hình trang quản lý order

Hình 80 Giao diện trang quản lý order

Bảng 57 Mô tả đối tượng giao diện quản lý order

Hình 81 Xử lý giao diện trang quản lý order

1 Tìm order theo tên khách hàng

Nhập từ khóa vào ô txtSearch

Bảng 58 Bảng danh sách của xử lý quản lý order

4.2.12 Màn hình trang quản lý chi tiết order

Hình 82 Giao diện trang quản lý chi tiết order

Bảng 59 Mô tả đối tượng giao diện quản lý chi tiết order

Hình 83 Xử lý giao diện trang quản lý chi tiết order

1 Cập nhật trạng thái đơn hàng

Bảng 60 Bảng danh sách của xử lý quản lý chi tiết order

4.2.13 Màn hình trang upload file

Hình 84 Giao diện trang upload file

Bảng 61 Mô tả đối tượng giao diện trang upload file

4.2.14 Màn hình trang quản lý danh sách user

Hình 85 Giao diện trang quản lý danh sách order

Bảng 62 Mô tả đối tượng giao diện quản lý danh sách user

Hình 86 Xử lý giao diện trang quản lý danh sách user

1 Tìm user theo tên Nhập từ khóa vào ô txtSearch

Bảng 63 Bảng danh sách của xử lý danh sách user

4.2.15 Màn hình trang quản lý chi tiết user

Hình 87 Giao diện trang quản lý chi tiết user

Bảng 64 Mô tả đối tượng giao diện quản lý chi tiết user

Hình 88 Xử lý giao diện trang quản lý chi tiết user

1 Xóa User Click vào button “Delete”

2 Lưu thông tin Click vào button “Save”

Bảng 65 Bảng danh sách của xử lý quản lý chi tiết user

4.2.16 Màn hình trang quản lý danh sách support

Hình 89 Giao diện trang quản lý danh sách support

Bảng 66 Mô tả đối tượng giao diện quản lý danh sách support

4.2.17 Màn hình trang quản lý chi tiết support

Hình 90 Giao diện trang quản lý chi tiết support

Bảng 67 Mô tả đối tượng giao diện quản lý chi tiết support

Hình 91 Xử lý giao diện trang quản lý chi tiết support

1 Lưu support Click vào button “Save”

Bảng 68 Bảng danh sách của xử lý quản lý chi tiết support

4.2.17.5 Mô tả xử lí: tương tự mục 3.3.2.10

CÁC MÀN HÌNH GIAO DIỆN CỦA ADMIN

4.3.1 Màn hình trang quản lý danh sách user

Hình 92 Giao diện trang quản lý danh sách user

Bảng 69 Mô tả đối tượng giao diện quản lý danh sách user

Hình 93 Xử lý giao diện trang quản lý danh sách user

1 Đăng xuất Click vào button “Logout”

Bảng 70 Bảng danh sách của xử lý quản lý danh sách user

4.3.2 Màn hình trang quản lý chi tiết user

Hình 94 Giao diện trang quản lý chi tiết user

Bảng 71 Mô tả đối tượng giao diện quản lý chi tiết user

Hình 95 Xử lý giao diện trang quản lý chi tiết user

1 Xóa User Click vào button “Delete”

2 Lưu thông tin Click vào button “Save”

Bảng 72 Bảng danh sách của xử lý quản lý chi tiết user

4.3.3 Màn hình trang quản lý danh sách website

Hình 96 Giao diện trang quản lý danh sách website

Bảng 73 Mô tả đối tượng giao diện quản lý danh sách website

4.3.4 Màn hình trang quản lý chi tiết website

Hình 97 Giao diện trang quản lý chi tiết website

Bảng 74 Mô tả đối tượng giao diện quản lý chi tiết website

Hình 98 Xử lý giao diện trang quản lý chi tiết website

1 Restart website Click vào button “Restart”

2 Stop website Click vào button “Stop”

Bảng 75 Bảng danh sách của xử lý quản lý chi tiết website

4.3.5 Màn hình trang quản lý danh sách support

Hình 99 Giao diện trang quản lý danh sách support

Bảng 76 Mô tả đối tượng giao diện quản lý danh sách support

4.3.6 Màn hình trang quản lý chi tiết support

Hình 100 Giao diện trang quản lý chi tiết support

Bảng 77 Mô tả đối tượng giao diện quản lý chi tiết support

Hình 101 Xử lý giao diện trang quản lý chi tiết support

1 Lưu support Click vào button “Save”

Bảng 78 Bảng danh sách của xử lý quản lý chi tiết support

4.3.6.5 Mô tả xử lí giống 3.3.3.3

TRÍCH DẪN THUẬT TOÁN

KIỂM THỬ PHẦN MỀM

Tiêu đề	Xây Dựng Ứng Dụng Web Tạo Website Bán Hàng
Tác giả	Mai Đức Tuấn, Nguyễn Văn Vũ
Người hướng dẫn	ThS. Nguyễn Minh Đạo
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	Khóa Luận Tốt Nghiệp Kỹ Sư CNTT
Năm xuất bản	2020
Thành phố	Tp. Hồ Chí Minh

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