Đồ án phát triển web ứng dụng, web mở rộng growpro

GIỚI THIỆU

Ý TƯỞNG

Xây dựng một hệ thống quản lý nội dung và giao diện hiển thị phù hợp với đặc điểm của người dùng, cho phép tùy chỉnh mọi thông tin hiển thị theo sở thích và ý muốn của người sử dụng.

- Hệ thống dễ dàng nâng cấp, cập nhật mọi lúc mọi nơi, có thể mở rộng, tích hợp nếu cần

- Hệ thống có thể cập nhật trực tiếp nội dung lẫn giao diện mà không làm gián đoạn hoạt động của các máy chủ và người sử dùng

- Dễ dàng khắc phục nếu gặp lỗi

- Thông tin bảo mật, phòng/chống các loại tấn công cơ bản

- Thu thập thông tin người dùng nhằm hướng tới phát triển hơn

- Dễ dàng chuyển đổi giữa các loại dịch vụ: quảng cáo, thông tin, bán hàng, blog cá nhân,…

- Tối ưu hóa tài nguyên :

➢ Dung lượng: Khi tải file lên, nếu file đã lưu trên máy chủ thì trả về đường dẫn Ngược lại lưu file và trả về đường dẫn

Tối ưu hóa tốc độ xử lý công việc bằng cách phân chia nhiệm vụ giữa các máy chủ và máy trạm, ưu tiên thực hiện trên máy trạm Sử dụng công nghệ đa luồng để nâng cao hiệu suất làm việc trên máy chủ, giúp tăng cường hiệu quả xử lý dữ liệu.

3 tầng hiển thị với máy trạm

CÁC YÊU CẦU ĐỂ SẢN PHẨM ĐƯỢC CÔNG NHẬN

❖ 3 câu hỏi nhanh để bắt đầu xây dựng 1 sản phẩm:

- Khách hàng/xã hội có cần hay không?

Với sự bùng nổ của kinh doanh điện tử hiện nay, việc xây dựng hình ảnh thương hiệu trở thành ưu tiên hàng đầu cho các doanh nghiệp Không chỉ cần chú trọng đến sản phẩm, logo và in ấn, mà cả trang web cũng cần phản ánh rõ nét bản sắc của doanh nghiệp để tạo ấn tượng sâu sắc trong lòng khách hàng Vì vậy, tôi tin rằng hệ thống phần mềm này sẽ là một giải pháp hiệu quả.

Khách hàng nên chọn sản phẩm của chúng tôi vì nó mang lại những ưu điểm vượt trội so với các sản phẩm khác trên thị trường Sản phẩm của chúng tôi được thiết kế với công nghệ tiên tiến, đảm bảo chất lượng và hiệu suất cao, giúp tiết kiệm thời gian và chi phí cho người sử dụng Bên cạnh đó, chúng tôi cam kết cung cấp dịch vụ khách hàng tận tâm và hỗ trợ sau bán hàng chu đáo, mang lại sự hài lòng tối đa cho khách hàng Chọn sản phẩm của chúng tôi, khách hàng không chỉ nhận được giá trị tốt nhất mà còn an tâm về sự lựa chọn của mình.

Hệ thống cho phép mỗi cá nhân phát huy tối đa ưu điểm và phong cách riêng của mình, phù hợp với vai trò và cương vị mà họ đảm nhận.

Trong bối cảnh thiết kế web đại trà hiện nay, việc tạo ra sự khác biệt trong mắt khách hàng là một thách thức lớn Do đó, một hệ thống cho phép tùy chỉnh hoàn toàn các thành phần của website theo yêu cầu của doanh nghiệp là rất cần thiết Chúng tôi cam kết mang đến cho bạn một giải pháp "website của bạn, phong cách của bạn".

Nó không bị ràng buộc bởi bất kỳ khuôn mẫu nào, cho phép bạn tự do sáng tạo và phát huy tối đa sức tưởng tượng của mình Bạn có thể thiết kế từng trang, từng phần, và mỗi sản phẩm hay thông tin đều mang phong cách cá nhân độc đáo, phù hợp với từng thời điểm và địa điểm.

Hệ thống được tổ chức thành nhiều máy chủ chuyên biệt, tối ưu hóa cho từng chức năng, nhằm nâng cao hiệu suất làm việc và bảo mật Điều này giúp giảm thiểu thiệt hại khi gặp sự cố hoặc tấn công, đồng thời dễ dàng khắc phục vấn đề với chi phí và thời gian tối thiểu.

Dễ dàng mở rộng, nâng cấp khi khách hàng có nhu cầu

- Sản phẩm của mình có dễ bị sao chép/thay thế hay không?

Hệ thống hoạt động trên nhiều server với các tính năng tối ưu riêng biệt và các tầng làm việc phân lớp, tạo sự dễ dàng cho khách hàng trong việc sử dụng và phục hồi Tuy nhiên, đối với lập trình viên, việc mở rộng hệ thống có thể gặp khó khăn nếu không hiểu rõ cấu trúc tổng thể Chi phí cho việc thay thế hoặc nâng cấp có thể cao hơn nếu chọn sản phẩm của bên thứ ba hoặc trả phí cho dịch vụ nâng cấp Hơn nữa, việc nâng cấp tùy tiện có thể dẫn đến lỗi không đồng bộ trong hệ thống.

❖ 3 câu hỏi để duy trì quảng bá sản phẩm:

- Doang thu mang lại/chi phí xây dựng của sản phẩm khi mang ra thị trường

+ Chi phí xây dựng hệ thống và chi phí mở rộng: sức lao động, server chạy hệ thống + Doang thu:

• Phí cài đặt, hỗ trợ, tư vấn về hệ thống

• Phí duy trì, bảo dưỡng, khắc phục hệ thống khi hoạt động

• Phí nâng cấp, thêm chức năng, chuyển đổi tính năng, cung cấp dịch vụ,…

- Rủi ro gặp phải khi sản phẩm mang ra thị trường

+ Lượt truy cập: nâng cấp server của chức năng đó như nâng cấp phần cứng/ thêm server xử lý chức năng đó

• Kiểm soát file tải lên

• Kết nối thêm database (sử dụng multiple database)/ nâng cấp database

- Cách để mọi người biết tới sản phẩm (makerting)

+ Miễn phí hệ thống với các tính năng cơ bản

+ Liên kết, hợp tác với các doang nghiệp, studio, cá nhân trong lĩnh vực it/marketing quảng bá sản phẩm và chia lợi nhuận từ nó.

CÁC FRAMEWORK WEB CHÍNH

- Xây dựng trang quản lý tài nguyên với Django (web framework)

- Xây dựng các trang hiển thị và tương tác với Flask (web framework)

CÁC LOẠI API TRUY VẤN DỮ LIỆU

- API REST :Truy vấn file, truy vấn giữa máy trạm-máy chủ

- API GraphQL :Truy vấn dữ liệu kiểu json giữa các máy chủ.

CÁC LOẠI NGÔN NGỮ ĐƯỢC SỬ DỤNG

LOAD THÔNG TIN HIỂN THỊ THEO 3 TẦNG

- Tầng một: Thông tin hiển thị ngay khi người dùng yêu cầu hiển thị trang

- Tầng hai: Tải các thông tin chưa được hiển thị (thông tin ẩn)

- Tầng ba: Các thông tin sẽ hiển thị theo tương tác của người dùng với trang mà không cần tải lại toàn trang

PHÂN TÍCH HỆ THỐNG

SƠ ĐỒ TỔNG QUÁT

Hình 1 sơ đồ tổng quát

Server API là máy chủ kết nối trực tiếp với cơ sở dữ liệu để tương tác và xử lý yêu cầu, cung cấp tài nguyên cho hệ thống qua các API Người quản trị có thể thực hiện các chỉnh sửa cơ bản thông qua giao diện hỗ trợ, nhưng việc này có thể khó khăn và dễ gây lỗi hệ thống Giao diện trên máy chủ chủ yếu phục vụ cho việc xem và theo dõi, yêu cầu người quản trị phải có kiến thức sâu về hệ thống để thực hiện chỉnh sửa Máy chủ này chỉ cho phép truy cập bằng tài khoản quản trị, và khi gặp sự cố, vấn đề có thể ảnh hưởng đến toàn bộ hệ thống Do đó, việc giám sát và sao lưu dữ liệu thường xuyên là rất cần thiết trong quá trình hoạt động.

Máy chủ quản trị (Server admin) là một hệ thống máy chủ hoặc nhóm máy chủ cung cấp các chức năng quản lý thông qua giao diện người dùng, với các ràng buộc chặt chẽ hơn so với máy chủ API Đây là máy chủ chính được sử dụng để quản lý toàn bộ hệ thống Khi người dùng truy cập, hệ thống sẽ cung cấp các chức năng cụ thể dựa trên quyền hạn của họ Trong trường hợp máy chủ gặp sự cố hoặc bị tấn công, việc khắc phục trở nên dễ dàng hơn (bằng cách tải lại máy chủ và kiểm tra lỗi) và ít ảnh hưởng đến toàn bộ hệ thống.

Máy chủ client là thành phần chính trong hệ thống, đảm nhiệm việc quản lý tương tác với người dùng và khách hàng Đây là máy chủ có tần suất truy cập cao nhưng thường có mức bảo mật thấp, dễ bị tấn công Nó cần xử lý nhiều tác vụ đồng thời với độ trễ thấp và tính liên tục cao Ngoài ra, máy chủ cũng phải dễ dàng khắc phục sự cố, mở rộng và nâng cấp khi cần thiết Trong trường hợp xảy ra tấn công hoặc vấn đề, cần hạn chế tối đa ảnh hưởng đến trải nghiệm người dùng và hoạt động của toàn bộ hệ thống, bao gồm việc cách ly hoặc tạm dừng khi cần thiết.

SƠ ĐỒ TƯƠNG TÁC TỔNG QUÁT

Hình 2 Sơ đồ tương tác tổng quát

Người dùng hệ thống sẽ được chia làm ba nhóm chính:

➢ Nhóm client: tương tác với hệ thống thông qua server client:

Client: khách hàng tham quan/vãng lai (không có tài khoản)

Custumer: khách hàng thân thiết/tiềm năng (đã/sẽ có tài khoản)

➢ Nhóm supadmin: tương tác với hệ thống thông qua server admin:

Supplier: nhà cung cấp hàng hóa

Partner: đối tác/ người hỗ trợ quản lý trang

➢ Nhóm admin: tương tác qua server api và server admin

Admin: người quản trị chính của hệ thống, quản lý tất cả thông tin/chức năng của hệ thống

❖ Phân cấp quyền: Admin > Partner > Supplier > Seller > Custumer > Client Phân cấp lớn hơn thì sẽ bao gồm các quyền của phân cấp nhỏ hơn nó

CHỨC NĂNG CỦA CÁC LOẠI NGƯỜI DÙNG

Khách tham quan (không có tài khoản)

Hình 3 sơ đồ chức năng khách tham quan

+ Xem tổng quan với một danh sách các sản phẩm với các thông tin tóm tắt:

+ Xem chi tiết sản phẩm:

❖ Bao gồm các thông tin tổng quan:

▪ Thông tin giới thiệu (do nhà cung cấp giới thiệu)

▪ Các thông tin liên quan (do người bán cung cấp)

+ Tìm kiếm theo thể loại: người dùng có thể chọn thể loại thông qua tag thể loại để lọc lấy các sản phẩm cùng thể loại

Người dùng có thể tìm kiếm sản phẩm theo nhà cung cấp bằng cách sử dụng tag nhà cung cấp, giúp lọc ra các sản phẩm cùng nguồn gốc.

Người dùng có thể tìm kiếm sản phẩm bằng cách nhập một phần hoặc toàn bộ tên sản phẩm vào thanh tìm kiếm, nhằm tìm ra một hoặc nhiều sản phẩm tương tự hoặc chứa các từ, ký tự mà họ đã cung cấp.

- Xem thông tin: xem các thông tin về trang

Xem thông tin hỗ trợ: xem các thông tin liên quan nếu cần liên hệ hỗ trợ

Khách hàng tiềm năng (đã đăng nhập)

Hình 4 sơ đồ chức năng khách hàng tìm năng

❖ Bao gồm các chức năng của khách tham quan

- Tạo tài khoản: Tạo mới một tài khoản người dùng cho khách mới

- Làm mới mật khẩu: Lấy lại mật khẩu cho người dùng quên mật khẩu

- Đăng nhập: Đăng nhập vào trang để phân biệt các người dùng khác nhau

- Trò chuyện: yêu cầu đăng nhập, liên hệ/ trao đổi tin nhắn

▪ Các thái độ với tin nhắn

+ Thu hồi tin nhắn (nếu có quyền)

+ Xóa tin nhắn (nếu có quyền)

+ Thêm thái độ với tin nhắn

+ Gửi lại (nếu gửi thất bại)

+ Thay đổi phòng/nhóm (nếu có quyền)

+ Xóa phòng/nhóm (nếu có quyền)

+ Đẩy thành viên ra khỏi phòng (nếu có quyền)

- Thêm thái độ với sản phẩm: yêu cầu đăng nhập

▪ Thái độ với sản phẩm

+ Thích sản phẩm : thông qua icon trên giao diện thông tin sản phẩm

+ Ghét sản phẩm: yêu cầu đã đặt mua sản phẩm, thông qua icon trên giao diện sản phẩm trong lịch sử đơn hàng

- Quản lý giỏ hàng: yêu cầu đăng nhập

▪ Số lượng muốn đặt hàng

▪ Thái độ với sản phẩm

▪ Số điện thoại liên hệ khi giao

▪ Email liên hệ trong quá trình giao

▪ Yêu cầu với đơn hàng

▪ Tổng số tiền phải thanh toán nếu nhận hàng

+ Thêm sản phẩm: thông qua số lượng sản phẩm

+ Loại bỏ sản phẩm ra khỏi giỏ hàng

+ Xem lịch sử đơn hàng: xem lại tất cả đơn hàng

- Xem lịch sử đơn hàng

❖ Bao gồm các thuộc tính của đơn hàng

▪ Thời gian tạo đơn hàng

▪ Thời gian cập nhật trạng thái

+ Xem thông tin cơ bản như khách tham quan thì không cần đăng nhập

+ Xem xem thông tin về quyền lợi và trách nhiệm của người dùng, yêu cầu đăng nhập + Quản lý tài khoản: yêu cầu đăng nhập

+ Cập nhật tài khoản: thay đổi mật khẩu

+ Xem thông tin cá nhân: xem các thông tin về người dùng

+ Xem lịch sử các đơn hàng của người dùng

Hình 5 sơ đồ chức năng người bán hàng

❖ Bao gồm các chức năng của khách hàng trên server client

❖ Bao gồm các thuộc tính thông tin của khách hàng

▪ Thuộc tính tiltle khi bán hàng

▪ Thống kê doang thu: theo ngày/tháng/năm/tất cả

❖ Tin nhắn trong nhóm: bao gồm các thuộc tính về tin nhắn

❖ Bao gồm các thuộc tính về sản phẩm

▪ Trạng thái với sản phẩm kèm số lượng

+ Xem danh sách có thể đăng ký thay quyền

+ Xem danh sách đã được ủy quyền

+ Cập nhật thông tin các sản phẩm đã được ủy quyền

- Quản lý layout của cá nhân(theo sản phẩm)

▪ Phong cách thể hiện tên(name_stype)

▪ Phong cách thể hiện tiêu đề(title_stype)

▪ Phong cách thể hiện mô tả

▪ Phong cách thể hiện layout

▪ Thuộc quyền quản lý của layout nào

▪ Thời gian chuyển cảnh(đối với layout là carolsel)

+ Xem danh sách/chi tiết layout

Hình 6 sơ đồ chức năng nhà cung cấp

❖ Bao gồm các quyền của seller

▪ Tên gọi khi là nhà cung cấp

▪ Tổng doang thu theo ngày/tháng/năm/tổng

❖ Bao gồm các thuộc tính sản phẩm

+ Xem danh sách các sản phẩm cá nhân/tất cả

+ Cập nhật các sản phẩm cá nhân đã đăng

+ Yêu cầu tạm dừng cung cấp với các sản phẩm cá nhân

+ Xem danh sách các seller đăng ký ủy quyền với sản phẩm

- Xem danh sách sản phẩm

+ Lọc theo loại sản phẩm

+ Lọc theo trạng thái sản phẩm: tồn kho/trao quyền/đã bán,…

- Đăng ký sản phẩm: thêm sản phẩm mới

- Cập nhật sản phẩm: thay đổi các thuộc tính sản phẩm

- Yêu cầu tạm dừng cung cấp

- Xem danh sách các seller đăng ký ủy quyền

+ Lọc theo trạng thái (đang chờ, đã cấp, thu hồi)

+ Tìm kiếm theo tên seller

+ Tìm kiếm theo tên sản phẩm

26 Đối tác (hỗ trợ quản lý trang)

Hình 7 sơ đồ chức năng đối tác

❖ Bao gồm các quyền của nhà cung cấp(supplier)

❖ Bao gồm các thuộc tính sản phẩm

▪ Tiêu đề thể loại(title)

▪ Đối tượng quản lý nó

+ Xem danh sách thể loại sản phẩm

+ Thêm thể loại sản phẩm

+ Cập nhật thể loại sản phẩm

- Xem danh sách thể loại sản phẩm

- Thêm thể loại sản phẩm

- Cập nhật thể loại sản phẩm

❖ Bao gồm tất cả thông tin sản phẩm

▪ Số lượng theo sản phẩm

▪ Người cập nhật sau cùng

▪ Số điện thoại liên hệ khi nhận

▪ Email nhận thông báo về đơn hàng

+ Xem danh sách các đơn hàng

- Xem danh sách các đơn hàng

▪ Phong cách thể hiện trang

▪ Phong cách thể hiện menu

▪ Thuộc quyền quản lý của đối tượng

- Xem các thành phần trong trang

❖ Bao gồm các thuộc tính layout

▪ Thuộc quyền quản lý trang

▪ Thuộc quyền quản lý sản phẩm

+ Thêm các thành phần trong trang

+ Cập nhật các thành phần trong trang

- Thêm các thành phần trong trang

- Cập nhật các thành phần trong trang

Hình 8 sơ đồ chức năng người quản trị

❖ Bao gồm các quyền của tất cả với server admin và server client

+ Cấp quyền cho các user

+ Cập nhật các thông tin cho các user

- Quản lý tất cả dữ liệu

+ Xem các lịch sử hoạt động

+ Cập nhật các dữ liệu

SƠ ĐỒ CƠ SỞ DỮ LIỆU

Hình 9 sơ đồ cơ sở dữ liệu

Cột "id" là khóa chính kiểu int, cột "username" lưu tên đăng nhập kiểu string, và "password" chứa mật khẩu cũng kiểu string Cột "first_name" và "last_name" lần lượt lưu họ và tên người dùng, cả hai đều là kiểu string Thời gian tạo tài khoản được lưu trong cột "date_joined" kiểu datetime, trong khi "last_login" ghi nhận thời gian đăng nhập gần nhất Cột "avata" lưu trữ ảnh đại diện, với đường dẫn lưu ảnh vào cơ sở dữ liệu Email chính của người dùng được lưu trong cột "email" kiểu string, dùng để đăng nhập và nhận mail Cột "is_active" cho biết trạng thái hoạt động, "is_staff" xác định có phải nhân viên hay không, và "is_superuser" chỉ ra có phải quản trị viên hay không, tất cả đều kiểu int Cuối cùng, cột "phone" lưu số điện thoại, "address" lưu địa chỉ liên hệ, và "coin" ghi nhận số xu trong hệ thống.

Nhóm người dùng để phân quyền trong hệ thống

Cột Kiểu Mô tả id int Khóa chính name string Tên nhóm

Người dùng tham gia nhóm phân quyền

Id Int Khóa chính user user Thành viên tham gia, liên kết bảng user group auth_gruop Nhóm phân quyền người dung, liên kết với bảng auth_group

Bảng tham chiếu các đối tượng/bảng trong cơ sở dữ liệu trên toàn bộ hệ thống, dữ liệu sẽ được hệ thống tự động khởi tạo khi chạy

Cột Kiểu Mô tả id int Khóa chính app_label string Tên của app model string Tên bảng trong model

Bảng quyền tham chiếu trên đối tượng trong hệ thống, dữ liệu sẽ được hệ thống tự động khởi tạo khi chạy

Id Int Khóa chính codename string Tên chức năng: “(add/change/delete)_”

+”Tên của bảng trong model” content_type_id content_type Đối tượng tham chiếu trong model, liên kết với bảng content_type

Bảng phân quyền của nhóm người dùng

Cột Kiểu mô tả bao gồm id (int) là khóa chính, pemit (auth_pemit) thể hiện quyền tham chiếu liên kết với bảng auth_pemit, và group (auth_group) cho biết nhóm được áp dụng, liên kết với bảng auth_group.

Lịch sử hành động trên server API

The article outlines a database schema for tracking user actions, featuring key components such as the primary key (id), action timestamp (action_time), and user information linked to the user table It categorizes actions by type (content_type) and identifies the specific object involved through object_id and object_repr Additionally, it includes an action flag to denote the nature of the action—whether it is an addition, modification, or deletion—and a change message detailing the specifics of the changes made.

Lịch sử hành động thông qua API do server API cung cấp

The article discusses a database schema that includes a primary key (id) and various fields related to user actions The "action_time" field records the timestamp of the action, while the "user" field links to the user table to identify the individual performing the action The "content_type" field specifies the type of action, connected to the content_type table Additionally, the "object_id" field stores the ID of the interacted object, and "object_repr" provides a representation of that object The "action_flag" indicates the type of action taken (1 for add, 2 for change, and 3 for delete), and the "change_message" field captures the details of any modifications made.

Bảng quản lý file được upload bằng API do server API cung cấp

Bảng chứa thông tin về các tệp tin được tải lên, bao gồm các trường như id (khóa chính), user (người dùng đã tải lên), title (tên tệp), file (đường dẫn lưu trữ tệp trong cơ sở dữ liệu), size (kích thước tệp), typefile (loại tệp) và time (thời gian tải lên).

Quản lý mã định danh để hệ thống phân biệt và cấp quyền cho người dùng (không cần đăng nhập)

Cột Kiểu mô tả bao gồm các trường dữ liệu quan trọng như id (int), là khóa chính, created (datetime) ghi lại thời gian tạo, user (user) để xác định người dùng áp dụng và revoked (datetime) để chỉ thời gian hết hiệu lực.

Bảng quản lý trạng thái kích hoạt của người dùng

Id là khóa chính, trạng thái lưu trữ được lưu trữ dưới dạng số nguyên Người dùng được liên kết với bảng user và có thể có một email phụ, cho phép thay đổi email chính nếu quên Trạng thái xác nhận được đánh dấu bằng số nguyên, với 0 là chưa xác nhận và 1 là đã xác nhận, mặc định là 0.

Bảng quản lý nhóm liên hệ

Cột Kiểu Mô tả id int Khóa chính name string Tên nhóm dest string Mô tả nhóm

Bảng quản lý nội dung tin nhắn

Cột Kiểu mô tả bao gồm các trường dữ liệu quan trọng như id (int) là khóa chính, user (user) để xác định người tạo, dest (string) chứa nội dung tin nhắn, groups (groups_join) liên kết với nhóm, time (datetime) ghi lại thời gian gửi tin nhắn và status (int) để biểu thị trạng thái của tin nhắn.

Bảng quản lý thành viên tham gia nhóm liên hệ

Cột Kiểu mô tả chứa các thông tin quan trọng như id (int) là khóa chính, user (thành viên tham gia) liên kết với bảng user, type_group (int) chỉ loại nhóm, group (groups_join) thuộc về nhóm liên kết với bảng groups_join, và last_chat (chat) là tin nhắn cuối cùng đã đọc trong nhóm của người dùng, liên kết với bảng chat.

Bảng quản lý nhà cung cấp

Cột Kiểu mô tả các trường dữ liệu trong bảng nhà cung cấp, bao gồm: id (int) là khóa chính, user (user) là người dùng được tham chiếu, title (string) là tên hiển thị của nhà cung cấp, total_sales (int) là tổng doanh thu, month_sales (int) là doanh thu trong tháng, year_sales (int) là doanh thu trong năm, và type (int) là loại nhà cung cấp.

Bảng quản lý người mua hàng

Cột Kiểu mô tả bao gồm các trường dữ liệu như sau: id (int) là khóa chính, user (user) là người dùng được tham chiếu tới và liên kết với bảng user Các trường khác bao gồm total_spending (int) ghi nhận tổng chi, month_spending (int) cho tổng chi trong tháng, year_spending (int) cho tổng chi trong năm, và type (int) xác định loại khách hàng.

Id int Khóa chính style string Phong cách hiển thị trang content content Kế thừa lại các thuộc tính trong bảng content, liên kết với bảng content

Bảng quản lý người bán hàng

Cột Kiểu Mô tả bao gồm các trường dữ liệu quan trọng như id (int) là khóa chính, user (user) để tham chiếu đến người dùng liên kết với bảng user, title (string) là tên hiển thị của người bán, total_sales (int) thể hiện tổng doanh thu, month_sales (int) cho biết tổng doanh thu trong tháng, year_sales (int) là tổng doanh thu trong năm, và type (int) xác định loại người bán.

Bảng thuộc tính chung cho các bảng sau kế thừa

Cột Kiểu mô tả các thuộc tính của đối tượng, bao gồm id (int) là khóa chính, title (string) thể hiện tiêu đề, title_style (string) quy định phong cách hiển thị tiêu đề, active (boolean) xác định trạng thái hoạt động, show (boolean) chỉ ra trạng thái hiển thị, name (string) là tên nhóm, và name_style (string) xác định phong cách hiển thị tên.

Bảng quản lý kiểu hiển thị của các thành phần trong trang

Cột Kiểu Mô tả id int Khóa chính style string Phong cách hiển thị groud string Nhóm hiển thị

Cột Kiểu mô tả bao gồm các thuộc tính như id (khóa chính kiểu int), parent (thuộc quyền quản lý của đối tượng kiểu string), content (kế thừa thuộc tính từ bảng content và liên kết với bảng này), priority (độ ưu tiên kiểu int), avatar (file ảnh đại diện, lưu trữ trong thư mục với đường dẫn vào cơ sở dữ liệu), và page (trang tham chiếu tới, liên kết với bảng page).

Bảng phân quyền của cá nhân người dùng

Cột Kiểu mô tả bao gồm các trường như id (int) là khóa chính, pemit (auth_pemit) thể hiện quyền tham chiếu liên kết với bảng auth_pemit, và user (user) chỉ định người dùng được áp dụng, liên kết với bảng user.

Bảng quản lý các thành phần trong trang

PHÂN TÍCH CÁC TÀI NGUYÊN VÀ CÁC LUỒNG DỮ LIỆU

Các loại ngôn ngữ

Python là một ngôn ngữ lập trình mạnh mẽ, hướng đối tượng và cấp cao, được phát triển bởi Guido van Rossum Với cú pháp đơn giản và dễ sử dụng, Python được coi là một trong những lựa chọn hàng đầu cho người mới bắt đầu học lập trình.

Python sở hữu cấu trúc dữ liệu cao cấp và phương pháp lập trình hướng đối tượng hiệu quả Cú pháp rõ ràng và linh hoạt của Python giúp nó trở thành ngôn ngữ lý tưởng cho việc viết script và phát triển ứng dụng trên nhiều nền tảng.

Tính năng chính của Python:

Ngôn ngữ lập trình đơn giản, dễ sử dụng

Python sở hữu cú pháp đơn giản và rõ ràng, giúp việc đọc và viết mã dễ dàng hơn so với các ngôn ngữ lập trình khác như C++, Java, hay C# Nhờ vào điều này, Python mang đến sự thú vị trong lập trình, cho phép người lập trình tập trung vào việc tìm kiếm giải pháp thay vì phải lo lắng về cú pháp.

Miễn phí, mã nguồn mở

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

Các chương trình Python có khả năng di chuyển giữa các nền tảng khác nhau và thực thi mà không cần thay đổi Chúng hoạt động mượt mà trên hầu hết các hệ điều hành như Windows, macOS và Linux.

Khả năng mở rộng và có thể nhúng

Khi phát triển ứng dụng phức tạp, bạn có thể kết hợp mã nguồn từ C, C++ và các ngôn ngữ khác vào Python, giúp nâng cao tính năng và khả năng scripting của ứng dụng, điều mà các ngôn ngữ lập trình khác khó thực hiện.

Ngôn ngữ thông dịch cấp cao

Khác với C/C++, Python giúp lập trình viên không phải lo lắng về quản lý bộ nhớ hay dọn dẹp dữ liệu không cần thiết Khi thực thi mã Python, ngôn ngữ này tự động chuyển đổi mã thành ngôn ngữ máy tính mà không cần can thiệp vào các hoạt động ở cấp thấp.

Thư viện tiêu chuẩn lớn để giải quyết những tác vụ phổ biến

Python sở hữu nhiều thư viện tiêu chuẩn phong phú, giúp lập trình viên tiết kiệm thời gian và công sức bằng cách không cần phải viết toàn bộ mã từ đầu.

Jinja2 là một ngôn ngữ tạo template cung cấp cho các lập trình viên Python, được tạo ra dựa trên ý tưởng của Django template

Jinja2 là một công cụ mạnh mẽ dùng để tạo ra các định dạng file như HTML, XML, dựa trên nguyên tắc kết hợp dữ liệu vào những vị trí được đánh dấu trong văn bản.

Các tính năng nổi bật:

Chế độ thực thi hộp cát cho phép theo dõi mọi khía cạnh của quá trình thực thi mẫu, đồng thời đưa vào danh sách trắng hoặc danh sách đen một cách rõ ràng Điều này giúp ưu tiên các mẫu không đáng tin cậy, tăng cường tính an toàn và bảo mật trong quá trình thực thi.

Hệ thống thoát HTML tự động mạnh mẽ để ngăn chặn tập lệnh chéo trang

Kế thừa mẫu giúp bạn có thể sử dụng cùng một bố cục hoặc bố cục tương tự cho tất cả các mẫu

Xác định và nhập macro trong các mẫu để dễ dàng sử dụng khi cần

Jinja2 tối ưu hóa hiệu suất bằng cách biên dịch các mẫu sang mã byte Python trong lần tải đầu tiên, giúp nâng cao hiệu suất thời gian chạy.

Biên dịch trước thời hạn tùy chọn

Dễ dàng gỡ lỗi với một hệ thống gỡ lỗi tích hợp các lỗi thời gian chạy và biên dịch mẫu vào hệ thống theo dõi Python tiêu chuẩn

Các ngoại lệ trỏ đến đúng dòng trong các mẫu để giúp gỡ lỗi dễ dàng hơn

Hỗ trợ AsyncIO để tạo mẫu và gọi các hàm không đồng bộ

Cú pháp có thể cấu hình Chẳng hạn, bạn có thể cấu hình lại Jinja2 để phù hợp hơn với các định dạng đầu ra như LaTeX hoặc JavaScript

Jinja2 cung cấp nhiều trình trợ giúp thiết kế mẫu hữu ích, giúp thực hiện các tác vụ phổ biến như chia chuỗi các mục thành nhiều cột.

Ngôn ngữ đánh dấu siêu văn bản (HTML) là thành phần cơ bản của hầu hết các trang web, nơi tất cả các đoạn văn, tiêu đề, hình ảnh và văn bản được cấu trúc và trình bày bằng HTML.

CSS, hay ngôn ngữ định kiểu theo tầng, là một ngôn ngữ quy tắc dùng để định dạng nội dung HTML Nó cho phép thiết kế các yếu tố của trang web, bao gồm màu nền, phông chữ, cột và đường viền.

Là ngôn ngữ kịch bản phía máy khách Nó được sử dụng để tạo trang web tương tác

Dễ dàng học và sử dụng

JavaScript, được lấy cảm hứng từ ngôn ngữ lập trình Java, nổi bật với cú pháp dễ học và viết mã Các nhà phát triển thường sử dụng JavaScript cho hầu hết các trang web và ứng dụng di động để thực hiện tập lệnh phía máy khách Trong suốt thập kỷ qua, Node.js đã trở nên phổ biến trong việc phát triển mã backend, và nhiều nền tảng phát trực tuyến cũng như video nổi tiếng đã được xây dựng bằng Node.js.

Có thể không phụ thuộc vào nền tảng

Các loại framework

Django là một khung web Python mạnh mẽ, giúp phát triển nhanh chóng các trang web an toàn và dễ bảo trì Với sự hỗ trợ từ các nhà phát triển dày dạn kinh nghiệm, Django giảm thiểu những rắc rối trong quá trình phát triển, cho phép bạn tập trung vào việc xây dựng ứng dụng mà không cần phải phát triển lại khung Là mã nguồn mở và miễn phí, Django có một cộng đồng năng động, tài liệu phong phú và cung cấp cả tùy chọn hỗ trợ miễn phí lẫn trả phí.

Django tuân theo triết lý "Bao gồm pin", cung cấp hầu hết các tính năng mà các nhà phát triển cần "ngoài luồng" Tất cả các thành phần đều hoạt động liền mạch, tuân thủ nguyên tắc thiết kế nhất quán và đi kèm với tài liệu phong phú, được cập nhật thường xuyên.

Django, được phát triển bằng Python, có khả năng hoạt động trên nhiều nền tảng khác nhau, cho phép người dùng không bị giới hạn bởi bất kỳ máy chủ nào và dễ dàng triển khai ứng dụng trên các hệ điều hành như Linux, Windows và macOS Ngoài ra, nhiều nhà cung cấp dịch vụ lưu trữ web hỗ trợ Django, cung cấp cơ sở hạ tầng và tài liệu cần thiết cho việc lưu trữ các trang web sử dụng framework này.

Django là một framework mạnh mẽ có khả năng xây dựng đa dạng các loại trang web, từ hệ thống quản lý nội dung, wiki, đến mạng xã hội và trang tin tức Nó tương thích với mọi khung phía máy khách và có thể phân phối nội dung ở nhiều định dạng khác nhau như HTML, RSS, JSON và XML.

Bên trong, hệ thống cung cấp nhiều lựa chọn cho hầu hết các chức năng cần thiết, bao gồm các cơ sở dữ liệu phổ biến và công cụ tạo khuôn mẫu, đồng thời cho phép mở rộng để tích hợp các thành phần khác khi cần thiết.

Django giúp các nhà phát triển bảo vệ trang web khỏi các lỗi bảo mật phổ biến bằng cách cung cấp một khung làm việc tự động Nó quản lý tài khoản người dùng và mật khẩu một cách an toàn, tránh việc lưu trữ thông tin phiên trong cookie dễ bị tấn công Thay vào đó, cookie chỉ chứa khóa, trong khi dữ liệu thực tế được lưu trữ an toàn trong cơ sở dữ liệu, đồng thời đảm bảo rằng mật khẩu không được lưu trữ trực tiếp mà là dưới dạng băm.

Django áp dụng kiến trúc "shared-nothing" dựa trên các thành phần độc lập, cho phép thay thế hoặc thay đổi dễ dàng Sự tách biệt rõ ràng giữa các phần giúp mở rộng quy mô hiệu quả, tăng khả năng xử lý lưu lượng truy cập bằng cách bổ sung phần cứng cho máy chủ bộ nhớ đệm, máy chủ cơ sở dữ liệu hoặc máy chủ ứng dụng.

Có thể bảo trì và tái sử dụng

Django được phát triển dựa trên các nguyên tắc và mẫu thiết kế nhằm tạo ra mã nguồn dễ bảo trì và tái sử dụng Nguyên tắc Don't Repeat Yourself (DRY) được áp dụng để loại bỏ sự trùng lặp không cần thiết, giúp giảm thiểu khối lượng mã Bên cạnh đó, Django khuyến khích việc tổ chức các chức năng liên quan thành các "ứng dụng" có thể tái sử dụng, đồng thời nhóm mã liên quan vào các mô-đun ở cấp độ thấp hơn.

Flask là một micro web framework viết bằng Python, không yêu cầu công cụ hay thư viện cụ thể nào Thuật ngữ “micro” không có nghĩa là thiếu chức năng, mà chỉ ra rằng Flask cung cấp một lõi chức năng tối giản cho ứng dụng web, cho phép người dùng mở rộng khi cần thiết Framework này hỗ trợ nhiều thành phần tiện ích mở rộng như tích hợp cơ sở dữ liệu, xác thực biểu mẫu, xử lý upload, và các công nghệ khác, giúp người dùng dễ dàng xây dựng web application trong thời gian ngắn và phát triển quy mô ứng dụng theo yêu cầu.

Phương thức load thông tin

Thông tin hiển thị ngay khi người dùng yêu cầu load trang

Các thông tin sẻ được máy chủ xử lý thành một response trả về khi người dùng yêu cầu, thường là thông qua lệnh get url

Hình 10 sơ đồ luồng dữ liệu theo tầng 1

Khi các thông tin tầng 1 đã hiển thị xong thì sẽ load các thông tin chưa được hiển thị (thông tin ẩn, thông tin trong popup,…)

Khi thông tin tầng 1 đã được tải xong, mã lệnh JavaScript sẽ kích hoạt sự kiện (window.onload) để tự động thực thi các lệnh tải và cập nhật tiếp theo mà không cần sự can thiệp của người dùng.

Các thông tin sẽ load theo tương tác của người dùng với trang thông qua các event được gọi

Khi trang web hoàn tất việc tải, người dùng có thể tương tác với các sự kiện và các lệnh JavaScript sẽ được thực thi, cho phép thay đổi dữ liệu mà không cần phải tải lại toàn bộ trang.

Các trình tự giải quyết tương tác của người dùng

Người dùng gửi yêu cầu đến máy chủ qua giao diện web trên máy trạm Máy chủ nhận request và gọi hàm xử lý tương ứng, sau đó gửi yêu cầu lấy dữ liệu đến server API Server API sẽ xử lý yêu cầu và gửi truy vấn lấy dữ liệu từ cơ sở dữ liệu Cơ sở dữ liệu trả dữ liệu về server API, nơi server API tiếp tục xử lý và gửi phản hồi lại máy chủ Cuối cùng, máy chủ xử lý dữ liệu vừa nhận và trả về phản hồi cho máy trạm, hiển thị dạng view cho người dùng.

- Vd: Truy cập một trang thông qua menu

Hình 13 sơ đồ luồng dữ liệu theo phương thức 1

Người dùng gửi yêu cầu qua giao diện web trên máy trạm, và máy trạm sẽ xử lý thông tin Nếu cấu trúc yêu cầu không chính xác, máy trạm sẽ phản hồi lại người dùng thông qua các ràng buộc trên HTML.

- VD: Nhập các giá trị trong một số ô input

Người dùng gửi yêu cầu thông qua giao diện trên máy trạm=> máy trạm xử lý, kiểm tra và phản hồi thông qua các hàm javascript

- VD: Mở/đóng một số popup

Người dùng gửi yêu cầu thông qua giao diện trên máy trạm=> máy trạm kiểm tra

=> gửi request lên máy chủ=> máy chủ xử lý và phản hồi lại máy trạm=> máy trạm phản hồi lại người dùng qua view

- VD: Tương tác với một số trang mà không qua menu / không hợp lệ

Người dùng gửi yêu cầu thông qua giao diện trên máy trạm => máy trạm kiểm tra

=> gửi request lên máy chủ => máy chủ kiểm tra và xử lý gửi request lên server API

Máy chủ API thực hiện việc kiểm tra, xử lý và gửi phản hồi về máy trạm Sau đó, máy trạm nhận phản hồi từ máy chủ và cung cấp giao diện (view) cho người dùng.

- VD: Tương tác không hợp lệ/ thiếu thông tin

Các loại API được sử dụng

API (Giao diện lập trình ứng dụng) là tập hợp các quy tắc và cơ chế cho phép các ứng dụng hoặc thành phần tương tác với nhau Nó cung cấp dữ liệu cần thiết cho ứng dụng của bạn dưới các định dạng phổ biến như JSON hoặc XML.

REST (REpresentational State Transfer) là một kiến trúc API sử dụng phương thức HTTP đơn giản để giao tiếp giữa các máy Thay vì chỉ sử dụng một URL để xử lý thông tin người dùng, REST thực hiện các yêu cầu HTTP như GET, POST, DELETE, v.v đến một URL cụ thể để quản lý và xử lý dữ liệu.

RESTful API là tiêu chuẩn thiết kế API cho ứng dụng web nhằm quản lý tài nguyên Đây là một trong những kiểu thiết kế API phổ biến hiện nay, cho phép các ứng dụng web và di động giao tiếp hiệu quả với nhau.

Chức năng quan trọng nhất của REST là quy định việc sử dụng các phương thức HTTP như GET, POST, PUT, DELETE và cách định dạng URL cho ứng dụng web nhằm quản lý các tài nguyên RESTful không quy định logic mã nguồn của ứng dụng và không bị giới hạn bởi ngôn ngữ lập trình, cho phép bất kỳ ngôn ngữ hoặc framework nào cũng có thể được sử dụng để thiết kế một RESTful API.

GraphQL là ngôn ngữ truy vấn API, cho phép thực hiện các truy vấn với dữ liệu hiện có Nó cung cấp mô tả chi tiết về dữ liệu trong API, giúp người dùng yêu cầu chính xác thông tin cần thiết, từ đó đơn giản hóa quá trình phát triển API và hỗ trợ các công cụ mạnh mẽ cho lập trình viên.

Yêu cầu những gì cần, nhận được chính xác nó

Gửi truy vấn GraphQL tới API giúp nhận được dữ liệu chính xác mà bạn cần, không thừa không thiếu Kết quả từ truy vấn GraphQL luôn có thể dự đoán được, mang lại sự nhanh chóng và ổn định cho các ứng dụng nhờ vào khả năng kiểm soát dữ liệu từ phía người dùng thay vì phụ thuộc vào máy chủ.

Nhận nhiều tài nguyên trong một yêu cầu

Các truy vấn GraphQL cho phép truy cập không chỉ các thuộc tính của tài nguyên mà còn cả các tham chiếu giữa chúng một cách mượt mà Trong khi API REST thường yêu cầu tải dữ liệu từ nhiều URL khác nhau, API GraphQL cung cấp toàn bộ dữ liệu cần thiết cho ứng dụng trong một yêu cầu duy nhất Điều này giúp các ứng dụng sử dụng GraphQL hoạt động nhanh chóng, ngay cả trên các kết nối mạng di động chậm.

Mô tả những gì có thể với một hệ thống loại

API GraphQL tổ chức dữ liệu theo loại và trường, cho phép truy cập toàn bộ khả năng dữ liệu từ một điểm cuối duy nhất Bằng cách sử dụng các loại, GraphQL đảm bảo rằng ứng dụng chỉ yêu cầu những thông tin cần thiết, đồng thời cung cấp các lỗi rõ ràng và hữu ích Điều này giúp ứng dụng tránh việc viết mã phân tích cú pháp thủ công.

Di chuyển nhanh hơn với các công cụ mạnh mẽ dành cho nhà phát triển

GraphQL cho phép người dùng xác định chính xác dữ liệu cần thiết từ API mà không cần rời khỏi trình chỉnh sửa, đồng thời giúp đánh dấu các vấn đề tiềm ẩn trước khi gửi truy vấn Bằng cách tận dụng hệ thống câu truy vấn, GraphQL hỗ trợ xây dựng các công cụ mạnh mẽ với mã thông minh được cải thiện.

Phát triển API của mà không cần phiên bản

Thêm trường và loại mới vào API GraphQL mà không làm ảnh hưởng đến các truy vấn hiện có, đồng thời ẩn các trường lão hóa khỏi các công cụ API GraphQL, với một phiên bản phát triển duy nhất, đảm bảo ứng dụng luôn có quyền truy cập vào các tính năng mới, đồng thời khuyến khích việc phát triển mã máy chủ sạch và dễ bảo trì.

Các kiểu response trả về

Trả về một response mà browser có thể hiển thị thành giao diện

Trả về một chuyển hướng tới một url khác

- Return Response(API GraphQL)/dir data

Trả về một response kiểu response, muốn sử dụng cần ép về một kiểu khác

Vd ép về json: data=json.loads(json.dumps(r.json()))

Trả về một response kiểu json

- Return Response(json.dumps(context), 200)

Trả về một response kiểu json

Lưu ý: khi dùng với fetch từ javacript

+ Với Return Response(json.dumps(context), 200)

Thì chỉ gọi hàm then((data) => {} nếu thành công

Thì gọi cả hàm then((data) => {} và hàm catch((error) => {}nếu thành công Để khắc phục ta cần thêm điều kiện if(!error){}

Các nơi lưu trữ dữ liệu

Lưu trữ các thông tin chung và cho phép tất cả người dùng có thể truy cập nếu có quyền thông qua các câu query

Lưu trữ các thông tin của các người dùng truy cập/sử dụng máy chủ đó

Thông tin được lưu trữ trong session/local đặt tại máy chủ

Các phiên làm việc(session) được xác định bằng mã cooki

Lưu trữ thông tin cá nhân người dùng tại thời điểm đó

Thông tin được lưu trữ trong cooki/ local đặt tại máy trạm

Các cooki luôn được đóng gói gửi lên server mỗi khi gửi request Từ đó phân biệt với các phiên làm việc khác

XÂY DỰNG HỆ THỐNG

Server API (Django)

a) Các bộ thư viện sử dụng:

Thư viện kèm theo khi cài đặt django

Thư viện cài đặt thêm

Cung cấp một số giao diện field hỗ trợ việc định dạng văn bản

Cung cấp bộ lọc queryset

Django-graphql-auth là một thư viện Python phổ biến trong dịch vụ web và ứng dụng GraphQL Thư viện này không có lỗ hổng bảo mật, đi kèm với tệp xây dựng và có giấy phép cho phép sử dụng Tuy nhiên, mức độ hỗ trợ cho thư viện này còn thấp.

Cung cấp khả năng xác thực với token

Cung cấp/ hỗ trợ tương tác dữ liệu với database kiểu mysql

Cung cấp/hỗ trợ các tương tác khi làm việc với ảnh

Cung cấp các gói hỗ trợ việc xây dựng API graphene trên django

Cung cấp các tiện ích mở rộng để cho các thư viện khác gọi lại

Cung cấp/ hỗ trợ tương tác dữ liệu với database kiểu PostgreSQL

Requests là một thư viện Python mạnh mẽ cho phép gửi các yêu cầu HTTP một cách dễ dàng Thư viện này hỗ trợ nhiều tính năng, bao gồm việc truyền tham số qua URL, gửi header tùy chỉnh và xác minh SSL, giúp lập trình viên thực hiện các tác vụ mạng một cách hiệu quả.

Tệp tĩnh được đơn giản hóa triệt để phục vụ cho các ứng dụng web Python chạy trên máy chủ

❖ Cài biến môi trường : python -m venv venv

❖ Khởi động môi trường : venv\Scripts\activate

❖ Di chuyển tới thư mục root : growpro

❖ Cài đặt các bộ thư viện: pip install -r requirements.txt

❖ Đồng bộ các bộ thư viện : pip freeze

❖ Vào file Growpro_django/settings.py cấu hình thông tin pj:

➢ Cấu hình thông tin database:

'ENGINE': 'django.db.backends.mysql',

'OPTIONS': {'init_command': "SET sql_mode='STRICT_TRANS_TABLES'"},

➢ Cấu hình địa chỉ xác thực

➢ Cấu hình thời gian duy trì đăng nhập

GRAPHQL_JWT => "JWT_EXPIRATION_DELTA": timedelta(days=7)

➢ Cấu hình thông tin mail hoạt động trong pj

EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'

EMAIL_HOST='smtp.gmail.com'

EMAIL_HOST_USER='growprosp@gmail.com'

DEFAULT_FROM_EMAIL='growprosp@gmail.com'

❖ Vào file Growpro_django/ app_grapql/ views.py cấu hình thông tin trang frontend: urlfe="http://127.0.0.1:5000/"

❖ Tạo các file migration/kiểm tra lỗi: python manage.py makemigrations

❖ Di chuyển tới các file lỗi/lỗi thời trong thư viện và thay đổi :

Signal(providing_args=['request', 'refresh_token'])

Ví dụ: from django.dispatch import Signal

#token_issued = Signal(providing_args=['request', 'user']) token_issued = Signal(['request', 'user'])

#token_refreshed = Signal(providing_args=['request', 'user'])

55 token_refreshed = Signal(['request', 'user'])

❖ Chạy lại lệnh: python manage.py makemigrations để tạo các file migration

❖ Thực hiện đồng bộ với database : python manage.py migrate

❖ Chạy chương trình nếu cần: python manage.py runserver c) Cấu trúc thư mục và chức năng:

- app_grapql: chứa các file liên quan app

- venv: chứa các thư viện được cài đặt

- manage.py: file quản lý project, chứa các tập lệnh thực thi hỗ trợ tương tác với project

- requirements.txt: chứa các tên thư viện + phiên bản đã cài đặt trong project

- Growpro_django: thư mục quản lý file project

Thư mục pycache chứa các tệp nhớ đệm được tạo ra khi thư mục đó được sử dụng như một thư viện hoặc được gọi lại File init .py có vai trò khai báo và thông báo rằng thư mục này là một thư viện có thể được sử dụng lại trong các dự án lập trình.

+asgi.py : file cấu hình asgi cho project + wsgi.py: file cấu hình wsgi cho project + schema.py: chứa các khai báo/ hàm sử dụng trong api grapql

+ Settings.py: chứa các thông số cấu hình project

+ urls.py: chứa các đường dẫn routes

Lưu ý trong file settings.py:

Do một số phiên bản thư viện không tương thích, một số thư viện hoặc hàm có thể không được hỗ trợ Do đó, bạn có thể gán lại các giá trị hoặc hàm đã được định nghĩa và hỗ trợ Tránh thay đổi trực tiếp trong thư viện vì điều này có thể ảnh hưởng đến hoạt động của các thư viện khác.

56 Đối với các thư viện có thể đặt lại trên file settings.py:

Django phiên bản 4.1 đã thay thế “django.utils.encoding.force_text” bằng “django.utils.encoding.force_str”, trong khi nhiều thư viện khác vẫn tiếp tục sử dụng “force_text” Do đó, người dùng cần cập nhật mã nguồn của mình để sử dụng “force_str” nhằm đảm bảo tính tương thích với phiên bản mới của Django.

“django.utils.encoding.force_text” = “django.utils.encoding force_str” from django.utils.encoding import force_str django.utils.encoding.force_text = force_str

Similar to other libraries, Django's translation module allows for internationalization through functions such as `gettext` and `gettext_lazy`, enabling seamless translation of text within applications.

Với các thư viện không thể đặt lại thì chúng ta phải thay đổi trực tiếp trong thư viện Vd:

File graphql_jwt / signals.py vì cấu trúc hàm Signal đã thay đổi: from django.dispatch import Signal

#token_refreshed = Signal(providing_args=['request', 'user']) token_refreshed = Signal(['request', 'user'])

File graphql_jwt / refresh_token / signals.py cấu trúc hàm Signal đã thay đổi: from django.dispatch import Signal

#token_refreshed = Signal(providing_args=['request', 'user']) token_refreshed = Signal(['request', 'user'])

- Thư mục pycache : chứa các file nhớ đệm được sinh ra khi thư mục đó là thư viện/gọi lại

- File init .py: file khai báo/ thông báo thư mục này là một thư viện có thể gọi lại

- Thư mục chứ các file do ckeditor upload

- Thư mục migrations chứa các phiên bảng làm việc với database

- Thư mục static chứa các file không phải python, vd: upload, css, js,…

- Thư mục templates: chứa các template

- File admin.py : chứa các cấu hình trang admin hiển thị với người dùng

- File apps.py: chứa cấu hình app

File models.py chứa các cấu hình của bảng cơ sở dữ liệu trong hệ thống, nhưng chỉ bao gồm một phần chứ không phải toàn bộ các bảng dữ liệu Phần lớn các bảng này được người dùng định nghĩa và chủ yếu được quản lý bởi ứng dụng.

- File schema.py: file chứa các kiểu/hàm/cấu hình định nghĩa api grapql

- File test.py: nơi chứa các hàm kiểm tra

- File urls.py: chứa các đường dẫn trong app

- File view.py: chứa các hàm sử lý khi đường dẫn(url) được gọi do người dùng cấu hình

- RESTful API : được cấu hình trong views.py

Vd: cấu hình upload file và quản lý các file đã upload bởi RESTful API

• @csrf_exempt : Trình quản lý với chế độ bỏ qua bảo vệ csrf mặc định để sử dụng phương thức “POST/PUT” trong django

• if request.method == 'POST': chỉ hoạt động khi phương thức là post

• file = request.FILES['file'] : lấy các giá trị là file gán vào biến file

• _file=file.read() : đọc các giá trị trong file và gán kết quả vào biến _file

• content_file = ContentFile(_file) : lọc lấy các giá trị nội dung trong _file

• …_user=request.POST['user']: nhận các giá trị tham số từ request

• u=str(_user).strip(): loại bỏ tất cả khoảng trắng và gán kết quả cho biến u

• user=User.objects.get(username=u): kiểm tra người dùng

@csrf_exempt def uploadFile(request): if request.method == 'POST': file = request.FILES['file']

_file=file.read() content_file = ContentFile(_file)

_user=request.POST['user'] u=str(_user).strip() if content_file: user=User.objects.get(username=u) if user:

The code checks for existing files in the `HistoryFileUp` database based on their size If such files are found, it constructs the file path and verifies if the file exists on the server If the file is found and matches the uploaded content, it returns a JSON response indicating that the file exists along with its URL Additionally, it prepares to upload a new file by creating an instance of `UploadedFile` with the provided content, filename, and file type.

) fileUpload=HistoryFileUp.objects.create( title=_filename, user=user, file=uploaded_file, typefile=_typefile, size=_size

The function checks the status of a file upload and returns a JSON response If the user exists and the file is successfully saved, it returns a status of true along with the file URL and a success message If the user does not exist, it returns a status of false with a corresponding message Similarly, if the file does not exist, it also returns a status of false and an appropriate message.

- API GraphQL: được cấu hình trong schema.py

Các bước để cấu hình các queryset trong graphql:

B1: import các model tham chiếu để lấy các kiểu dữ liệu from app_grapql.models import *

B2: khai báo các Types : loại đối tượng truy vấn class PanerType(DjangoObjectType): class Meta: model = Paner fields=' all ' filter_fields=' all ' interfaces = (graphene.relay.Node, )

B3: Khai báo các đối tượng và kiểu truy vấn class Query(graphene.ObjectType):

#model all_page =filter.DjangoFilterConnectionField(PageType) page =graphene.relay.Node.Field(PageType)

B4: Cấu hình lại dữ liệu đầu ra nếu muốn def resolve_count_Items_seller(self, info): return Items_seller.objects.filter(stastus='Public').count()

Ví dụ một kết quả query

Hình 18 kết quả từ một câu lệnh query

+ Mutation: tương tác với dữ liệu

B1: Tạo lớp chứa hành động sẽ thực thi khì gọi:

Change user FirtName without login

It needs a token to authenticate

""" class Arguments: firtName=graphene.String(required=True)

The `resolve_mutation` method checks if the user is authenticated; if so, it updates the user's first name with the value provided in the arguments and saves the changes, returning a success response If the user is not authenticated, it returns an error message indicating that the user does not exist.

Output là lớp đệm với đối tượng cls, bao gồm hai thuộc tính chính là success và errors Lớp này được công khai mở rộng và thường được gọi trong các hàm của thư viện graphene Do đó, nó nên được kế thừa để đồng bộ hóa các kiểu trả về hoặc nhận các kiểu trả về từ các thư viện có sẵn, mặc dù không bắt buộc phải kế thừa.

• ChangeFirtNameAction: tên lớp chứa hành động

• Arguments: Tham số truyền vào/trả về

• resolve_mutation: hàm sẽ được thực thi khi hành động

• cls: đối tượng được kế thừa, thường dùng làm kiểu trả về vì nó có thể nhận kèm theo các hành động khác

• info: thông tin request, thường dùng để xác thực người dùng

• kwargs: các tham số truyền vào

B2: chuyển hàm vừa tạo thành hàm Mutation với các ràng buộc, báo lỗi, hiển thị,

#user class ChangeFirtName(MutationMixin, DynamicArgsMixin,

• ChangeFirtName: tên hàm sử dụng khi khai báo mutation

• MutationMixin: nhận được thông báo ngoại lệ khi kế thừa lớp này

The DynamicArgsMixin class serves as an extension for initializing and retrieving arguments It extracts arguments from cls._args and cls._required_args, allowing for a flexible input format, whether as a dictionary with argument names and types or as a list of argument names, defaulting to String type.

• ChangeFirtNameAction lớp chứa hành động khi gọi tới

• graphene.Mutation: Chuyển sang thành hàm mutation khi kế thừa lớp này

• _required_args: các tham số bắt buộc phải có

B3: Khai báo với hệ thống:

#Mutation class Mutation(graphene.ObjectType):

Lưu ý: kiểu trả về của mutation có thể là một đối tượng, và cho phép truy vấn tới các đối tượng khác nếu có liên kết trong query

Vd:Lấy/tạo ra hóa đơn với hóa đơn với trạng thái mới tạo của người dùng

• Id của hóa đơn nếu thành công

Hình 19 kết quả từ câu lệnh mutation

Chúng ta có thể áp dụng tính chất "Có thể bảo trì và tái sử dụng" để tận dụng các hàm từ các thư viện đã cài đặt, giúp việc xây dựng trở nên nhanh chóng hơn, giảm thiểu sự trùng lặp và tối ưu hóa số lượng mã.

Vd: Để xử lý yêu cầu xác nhận người dùng qua mail :

Cách 1: Dùng thư viện graphql_auth để xác thực from graphql_auth.models import def activate(request,token):

To achieve desired results using the verify function from the graphql_auth library, combine various library components, including Django's render and redirect from django.shortcuts, the user model from django.contrib.auth, UserStatus from graphql_auth.models, and token payload utilities from graphql_auth.utils Additionally, consider the settings defined in graphql_auth.settings and the constants specified in graphql_auth.constants for effective implementation.

UserModel = get_user_model() urlfe=http://127.0.0.1:5000/ def activate(request,token):

To verify a user status, the function UserStatus.verify(token) retrieves the token payload for activation using the provided token and expiration settings It then fetches the user associated with the payload and checks their verification status If the user is already verified, it redirects to the verification page If the user is not verified, the function updates their status to verified and saves the change before redirecting In cases where the verification status is indeterminate, it renders an error page with an appropriate message.

- from django.shortcuts import render,redirect : thêm 2 kiểu trả về từ thư viện django

- from django.contrib.auth import get_user_model: thêm hàm lấy đối tượng người dùng trong thư viện xác thực django

- from graphql_auth.models import UserStatus : thêm đối tượng trạng thái người dùng trong thư viện graphql_auth

- from graphql_auth.utils import get_token_paylod: thêm hàm giải mã dữ liệu từ đoạn mã cho trước trong thư viện graphql_auth

- from graphql_auth.settings import graphql_auth_settings as app_settings: thêm các giá trị cài đặt của graphql_auth

- from graphql_auth.constants import TokenAction : thêm đối tượng quản lý các mã quy định các hoạt động của hệ thống

- UserModel = get_user_model() : gán đối tượng người dùng vào biến để sử dụng

Server Client(Flask)

a) Các bộ thư viện sử dụng:

Thư viện kèm theo khi cài đặt Flask

Thư viện cài đặt thêm

Thư viện hỗ trợ tương tác thời gian thực trong Flask cho phép truyền tải và hiển thị dữ liệu ngay lập tức khi có sự thay đổi, là một framework phổ biến cho việc xây dựng ứng dụng web bằng Python.

- Cung cấp một giao thức truyền tải dữ liệu theo thời gian thực (real-time) giữa máy chủ và trình duyệt của khách hàng (client)

- Cho phép phát hiện sự kiện (event) trên máy chủ và truyền tải chúng đến client để xử lý

- Hỗ trợ tạo phòng (room) để các client cùng tham gia và giao tiếp với nhau

- Cung cấp các tiện ích để kiểm soát kết nối giữa client và máy chủ

- Hỗ trợ các kiểu dữ liệu phổ biến, bao gồm JSON và MessagePack

- Có thể sử dụng cùng với các thư viện JavaScript như Socket.IO hoặc jQuery để phát triển các ứng dụng web hiệu quả hơn

Thư viện localStoragePy là một công cụ Python hữu ích giúp lưu trữ dữ liệu cục bộ trên máy của người dùng Thư viện này cho phép các ứng dụng web dễ dàng lưu trữ thông tin của người dùng, mang lại sự tiện lợi trong việc quản lý dữ liệu.

Các chức năng của thư viện localStoragePy bao gồm:

- Cho phép lưu trữ và truy xuất các giá trị dữ liệu trong localStorage của người dùng, bao gồm cả các đối tượng Python

- Hỗ trợ các phương thức để thêm, sửa đổi và xóa các giá trị dữ liệu

- Hỗ trợ đọc và ghi các giá trị dữ liệu dưới dạng JSON, giúp dữ liệu được truyền tải một cách dễ dàng

Cho phép người dùng tùy chỉnh các tham số để quản lý việc lưu trữ dữ liệu, bao gồm thời gian sống của dữ liệu và tên kho lưu trữ.

❖ Di chuyển tới thư mục root : growpro_flash

❖ Vào file growpro_flash/settings.py cấu hình thông tin pj:

SECRET_KEY="8c7dbd270cb98e83f9d8d57fb8a2ab7bac9d755asf41sg51" url_backend=f"https://thong1993.pythonanywhere.com/" endpoint = f"{url_backend}graphql"

#item number_item=9 item_catergory=3 item_catergory_len item_tilte_len3

Cấu hình thông tin địa chỉ truyền và nhận dữ liệu: url_backend=f"https://thong1993.pythonanywhere.com/" endpoint = f"{url_backend}graphql"

Cấu hình thông tin hiển thị

117 c) Cấu trúc thư mục và chức năng:

pycache : thư mục do hệ thống tạo quản lý các file sẽ được sử dụng

Graphql: thư mục quản lý các api truy vấn tài nguyên

Page: thư mục quản lý các file code py chính Static: thư mục quản lý các file khác: js, css, image,…

The article outlines the essential components of a web application, including the "Templates" directory for managing HTML files, "Apps.py" for handling and routing paths, and "Export_function_socket.py" which manages event handling functions from socket.io Additionally, "Export_function_urls.py" oversees event handling functions from Flask, while "Models.py" is responsible for database management The "requirements.txt" file lists the libraries used within the virtual environment (venv), and "settings.py" manages the overall application settings Lastly, the "venv" directory contains the necessary libraries and configurations required to run the application effectively.

Thư mục control: quản lý các file chứa hàm quản lý tài nguyên

Thư mục query: quản lý các file chứa các câu lệnh thực thi

File cart.py: file chứa các câu lệnh liên quan với giỏ hàng

File invoice.py: file chứa các câu lệnh liên quan với hóa đơn

File item.py: file chứa các câu lệnh liên quan với sản phẩm

File menu.py: file chứa các câu lệnh liên quan với menu

File page.py: file chứa các câu lệnh liên quan với các thành phần trong trang

File user.py: file chứa các câu lệnh liên quan với người dùng

File settings.py: chứa các cấu hình chung của các hàm

Thư mục chat quản lý các file chứa các hàm liên quan về hội thoại

File chat.py chứa các hàm liên quan về hội thoại Thư mục item: quản lý các file chứa các hàm liên quan về sản phẩm

File cart.py: chứa các hàm liên quan về giỏ hang File category.py: chứa các hàm liên quan về thể loại sản phẩm

File invoice.py chứa các hàm liên quan đến việc xử lý hóa đơn, trong khi file item.py tập trung vào các hàm liên quan đến sản phẩm Thư mục user được sử dụng để quản lý các file chứa hàm liên quan đến người dùng.

File changepass.py: chứa các hàm liên quan về thay đổi mật khẩu

File extend.py: chứa các hàm khác

File information.py: chứa các hàm về thông tin người dùng

File login.py: chứa các hàm về đăng nhập File register.py: chứa các hàm về đăng ký File verify.py: chứa các hàm về xác nhận

Thư mục css chứa và quản lý tất cả các tệp tin CSS, trong khi thư mục fonts đảm nhận việc lưu trữ các tệp font chữ Thư mục img được sử dụng để quản lý các tệp ảnh, và thư mục js chứa các tệp cũng như thư viện JavaScript cần thiết cho dự án.

The base.html file serves as a fundamental template that includes essential components of a website, such as the header, footer, menu, navigation bar, and shared JavaScript or CSS code.

Thư mục macros: quản lý các file chứa các đoạn mã macros, dùng để định nghĩa các thành phần/khối lặp lại một cách dễ dàng

Thư mục response: quản lý các file chứa các đoạn mã dùng để tạo các kiểu trả về

Thư mục carts: quản lý các file chứa các đoạn mã liên quan tới giỏ hang

Thư mục chats: quản lý các file chứa các đoạn mã liên quan tới hội thoại

Thư mục invoice: quản lý các file chứa các đoạn mã liên quan tới hóa đơn

Thư mục items: quản lý các file chứa các đoạn mã liên quan tới sản phẩm

Thư mục layouts: quản lý các file chứa các đoạn mã liên quan tới thành phần trang

Thư mục users: quản lý các file chứa các đoạn mã liên quan tới người dùng

120 d) Các giao diện người dùng trên laptop/pc:

Hình 120 giao diện trang chủ

Hình 121 giao diện trang thể loại

Giao diện sản phẩm khi trỏ chuột vào sản phẩm

Hình 122 giao diện sản phẩm khi trỏ chuột

- Thanh menu sản phẩm sẽ hiện ra

- Thanh menu hỗ trợ phép :

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

+ Trò chuyện với người bán

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

Hình 123 giao diện sản phẩm khi xem chi tiết

Hình 124 giao diện trang trò chuyện

Hình 125 giao diện trang giỏ hàng Đăng ký

Hình 126 giao diện trang đăng ký

Hình 127 giao diện trang đăng nhập với username Đăng nhập(email)

Hình 128 giao diện trang đăng nhập với email

Hình 129 giao diện trang lấy lại mật khẩu

Hình 130 giao diện trang xác thực email

Hình 131 giao diện trang thông tin người dùng

Hình 132 giao diện thay đổi họ

Hình 133 giao diện thay đổi tên

Hình 134 giao diện trang lịch sử mua hàng – sản phẩm

Hình 135 giao diện yêu cầu hủy đơn hàng

129 e) Các giao diện người dùng trên điện thoại:

Hình 136 giao diện trang chủ trên điện thoại

Hình 137 giao diện trang thể loại trên điện thoại

Hình 138 giao diện trang trò chuyện trên điện thoại

Hình 139 giao diện trang chủ trên điện thoại

Hình 140 giao diện trang giỏ hàng trên điện thoại

Hình 141 giao diện trang đăng ký trên điện thoại

Hình 142 giao diện trang đăng nhập trên điện thoại

Hình 143 giao diện trang quên mật khẩu trên điện thoại

Hình 144 giao diện trang xác thực email trên điện thoại

Hình 145 giao diện trang thông tin người dùng trên điện thoại

Hình 146 giao diện thay đổi thông tin người dùng trên điện thoại

Hình 147 giao diện trang lịch sử mua hàng trên điện thoại

Server Admin(Flask)

a) Các thư viện sử dụng

Tương đồng các bộ thư viện trong server Client: b) Hướng dẫn cài đặt

❖ Di chuyển tới thư mục root : growpro_sv

❖ Vào file growpro_sv/settings.py cấu hình thông tin pj:

SECRET_KEY="8c7dbd270cb98e83f9d8d57fb8a2ab7bac9d755asf41sg51"

#url_backend=f"http://127.0.0.1:8000/" url_backend=f"https://thong1993.pythonanywhere.com/" endpoint = f"{url_backend}graphql"

Cấu hình thông tin địa chỉ truyền và nhận dữ liệu: url_backend=f"https://thong1993.pythonanywhere.com/" endpoint = f"{url_backend}graphql"

Cấu hình thông tin hiển thị

141 c) Cấu trúc thư mục và chức năng:

Graphql: thư mục quản lý các api truy vấn tài nguyên Page: thư mục quản lý các file code py chính

Static: thư mục quản lý các file khác: js, css, image,…

The article discusses the structure of a project directory, highlighting key files and their functions The "Templates" directory organizes HTML files, while "Apps.py" manages and assigns paths "Export_function_socket.py" handles event processing functions from socket.io, and "Export_function_urls.py" manages event processing from Flask "Models.py" oversees database management, and "requirements.txt" lists the libraries used within the virtual environment (venv) Additionally, "settings.py" contains the general configurations for the program, and the "venv" directory includes the necessary libraries and settings to run the application.

Thư mục control: quản lý các file chứa hàm quản lý tài nguyên

Thư mục query quản lý các file chứa câu lệnh thực thi, bao gồm file cart.py với các lệnh liên quan đến giỏ hàng và file layout.py chứa các lệnh liên quan đến thành phần trang.

File invoice.py chứa các lệnh liên quan đến hóa đơn, trong khi file item.py quản lý các lệnh liên quan đến sản phẩm File menu.py đảm nhiệm các lệnh liên quan đến menu, và file page.py chứa các lệnh liên quan đến các thành phần trong trang.

File user.py: file chứa các câu lệnh liên quan với người dùng File settings.py: chứa các cấu hình chung của các hàm

Thư mục chat quản lý các file chứa các hàm liên quan về hội thoại

Thư mục item: quản lý các file chứa các hàm liên quan về sản phẩm

Thư mục user: quản lý các file chứa các hàm liên quan về người dùng

The file chat.py contains functions related to dialogue management, while item.py encompasses functions associated with product handling Additionally, layout.py includes functions pertinent to page components, and header.py focuses on functions related to the menu structure.

File page.py: chứa các hàm liên quan về trang File changepass.py: chứa các hàm liên quan về thay đổi mật khẩu

File extend.py: chứa các hàm khác File information.py: chứa các hàm về thông tin người dùng File login.py: chứa các hàm về đăng nhập

File register.py: chứa các hàm về đăng ký File verify.py: chứa các hàm về xác nhận

Thư mục css dùng để quản lý các tệp CSS, trong khi thư mục fonts phục vụ cho việc lưu trữ các tệp font Thư mục img được sử dụng để quản lý các tệp ảnh, và thư mục js chứa các tệp và thư viện JavaScript.

File base.html là một mẫu cơ bản cho trang web, bao gồm các phần chung như header, footer, menu, và thanh điều hướng, cùng với mã JavaScript hoặc CSS Thư mục macros quản lý các file chứa đoạn mã macros, giúp định nghĩa các thành phần hoặc khối lặp lại một cách dễ dàng.

Thư mục pages: quản lý các file chứa các đoạn mã liên quan tới trang

Thư mục layouts: quản lý các file chứa các đoạn mã liên quan tới thành phần trang

Thư mục users: quản lý các file chứa các đoạn mã liên quan tới người dùng d) Các giao diện người dùng: Đăng nhập(username)

Hình 148 giao diện trang đăng nhập với username

Hình 149 giao diện trang thông tin người dùng

Hình 150 giao diện trang danh sách layout

Hình 151 giao diện thêm layout

Hình 152 giao diện cập nhật layout

Hình 153 giao diện thêm layout con

Hình 154 giao diện thêm item layout

Popup thay đổi giá trị kiểu combobox

Hình 155 giao diện popup thay đổi giá trị kiểu combobox

Popup thay đổi giá trị kiểu text

Hình 156 giao diện popup thay đổi giá trị kiểu text

Popup thay đổi giá trị kiểu file

Hình 157 giao diện popup thay đổi giá trị kiểu file

Tiêu đề	Đồ án tốt nghiệp phát triển web ứng dụng, web mở rộng growpro
Tác giả	Ngô Minh Thống
Người hướng dẫn	ThS. Nguyễn Tấn Phương
Trường học	Trường Đại học Bà Rịa - Vũng Tàu
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Đồ án tốt nghiệp
Năm xuất bản	2023
Thành phố	Vũng Tàu

Định dạng
Số trang	150
Dung lượng	10,24 MB