윅스 (Wix) 코딩 예제 - 데이터 후크가 있는 컬렉션에 저장되기 전에 사용자 입력 처리하기 (Wix Code Tutorial: Processing User Input Before it is Stored in a Collection with Data Hooks)

윅스 (Wix) 코딩 예제 - 데이터 후크가 있는 컬렉션에 저장되기 전에 사용자 입력 처리하기 (Wix Code Tutorial: Processing User Input Before it is Stored in a Collection with Data Hooks)

 

 

 

설명)

 

때로는 양식을 사용하여 수집한 사용자 입력을 컬렉션에 저장하기 전에 유효성을 검사하거나 변경하거나 조작하려는 경우가 있습니다. 이렇게하려면 새로 생성된 항목이 컬렉션에 저장되기 전에 가로챌 데이터 후크를 만들 수 있습니다. 그런 다음 원하는 방식으로 항목을 변경할 수 있으며 변경된 항목은 컬렉션에 추가된 항목이 됩니다.

 

이 개념을 증명하기 위해 우리는 문의 양식이 있는 부동산 사이트의 예를 사용합니다. 사용자는 양식을 작성하여 정보를 제출합니다. 사용자 데이터를 컬렉션에 저장하기 전에 특정 조건이 충족되면 후크를 사용하여 일부 데이터의 서식을 지정하고 새 항목에 정보를 추가합니다.

 

 

 

전제 조건 (Prerequisites)

이 글은 사용자가 데이터베이스 컬렉션 및 사용자 입력 양식 작성에 익숙하다고 가정합니다. 계속하기 전에 데이터 후크에 대해 더 자세히 읽고 싶을 수도 있습니다.

 

컬렉션 (Collection)

먼저 사용자가 양식을 사용하여 제출하는 정보를 저장하는 데이터베이스 컬렉션을 만듭니다. 컬렉션을 사용하여 사용자 입력을 저장하므로 Form Submission 사전 설정을 사용하여 권한을 설정합니다.

 

이 예제에서는 PotentialClients 컬렉션을 호출하며 다음 입력란(필드)가 있습니다.

 

- 이름 (First Name) - 텍스트 (Text)

- 성 (Last Name) - 텍스트 (Text)

- 이메일 (Email) - 텍스트 (Text)

- 전화 (Phone) - ​​텍스트 (Text)

- 유형 (Type) -텍스트 (Text) (값은 "Buy"또는 "Rent")

- 침실 (Bedrooms) - 번호 (Number)

- 욕실 (Bathrooms - 번호 (Number)

- 가격 (Price) - 번호 (Number)

- 우선 순위 (Priority) - 부울 (Boolean)

 

 

 

입력 양식 (Input Form)

다음 단계는 사용자 입력 양식을 작성하는 것입니다. 후크는 사용자가 양식을 제출할 때 작성된 컬렉션 항목을 수정하는 데 사용되므로 양식의 입력란(필드)가 컬렉션의 항목과 정확하게 일치할 필요는 없습니다.

 

이 예제에서는 다음 형식을 사용합니다.

 

 

 

 

양식에는 PotentialClients 컬렉션의 거의 모든 입력란(필드)와 일치하는 입력 요소가 포함되어 있습니다. 우선 순위 입력란(필드)에 해당하는 입력 요소가 없습니다. 우선 순위 입력란(필드)의 값이 사용자가 양식을 제출할 때 호출되는 후크에 설정되기 때문입니다.

 

 

후크 (Hook)

마지막 단계는 컬렉션에 삽입되기 전에 새로 생성된 항목을 수정하는 후크를 만드는 것입니다. beforeInsert 후크는 새 항목이 컬렉션에 삽입될 때 트리거됩니다. 후크가 삽입될 항목을 받습니다. 후크의 코드에서 원하는대로 항목을 수정하거나 완전히 새로운 항목을 만들 수 있습니다. 작업이 완료되면 수정된 항목이나 새 항목이 반환됩니다. 반환된 항목은 후크가 받은 항목 대신 컬렉션에 삽입됩니다.

 

후크 코드는 사이트의 백엔드 섹션에 있는 data.js 파일에 기록됩니다. 후크 만들기에 대한 자세한 내용은 데이터 후크 사용 방법을 참조합니다.

 

이 예제에서는 다음의 beforeInsert 후크가 두 가지 작업을 수행합니다.

- 사용자가 이름을 입력하는 방법에 관계없이 이름과 성을 서식을 지정합니다.

a. 대문자로 시작하십시오.

b. 나머지 문자는 소문자입니다.

- 잠재적인 클라이언트가 우선 클라이언트인지 아닌지 확인하고 그에 따라 우선 순위 입력란(필드)를 설정합니다.

 

 

export function PotentialClients_beforeInsert(item, context) {
  item.firstName = toUpperFirst(item.firstName);
  item.lastName = toUpperFirst(item.lastName);
   
  if(item.price > 1000000 && item.type === 'Buy') {
    item.priority = true;
  }
   
  return item;
}

function toUpperFirst(s) {
  return s.charAt(0).toUpperCase() + s.slice(1);
}

 

코드를 한 번에 하나씩 살펴 보겠습니다.

 

 

1행에서 우리는 후크 함수 정의를 시작합니다. 후크 함수의 이름은 <collectionName> _ <hookType>과 같은 규칙에 따라 지정됩니다. 그래서 후크 이름은 PotentialClients_beforeInsert입니다.

 

export function PotentialClients_beforeInsert(item, context) {

 

 

2~3행에서 후크는 성과 이름을 가져와서 위에서 가져온 toUpperFirst( ) 함수를 사용하여 형식을 지정합니다.

 

item.firstName = toUpperFirst(item.firstName);
item.lastName = toUpperFirst(item.lastName);

 

 

노트 :

toUpperFirst( ) 함수를 별도의 파일로 만들고 data.js로 가져올 수 있습니다. 그러면 다른 곳에서 함수를 사용할 수 있습니다.

 

 

5-7행에서 가격 및 유형 특성 값을 확인합니다. 잠재 고객이 $ 1,000,000 이상의 재산을 사려고하면 컬렉션의 항목이 우선 순위 항목으로 표시됩니다.

 

if(item.price > 1000000 && item.type === 'Buy') {
  item.priority = true;
}

 

 

마지막으로 9번째 행에서 수정된 항목을 반환합니다. 이는 컬렉션에 삽입된 항목의 서식이 지정된 이름과 우선 순위 입력란(필드)가 올바르게 설정됨을 의미합니다.

 

return item;

 

 

 

 

 

연관된 토픽)

 

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

https://support.wix.com/en/article/wix-code-tutorial-processing-user-input-before-it-is-stored-in-a-collection-with-data-hooks