윅스 (Wix) 코딩 - 페이지 요소와 데이터베이스 콘텐츠 연결하기 (About Connecting Page Elements to Database Content)

윅스 (Wix) 코딩 - 페이지 요소와 데이터베이스 콘텐츠 연결하기 (About Connecting Page Elements to Database Content)

 

 

 

설명)

 

데이터 연결은 페이지 요소를 데이터베이스 컬렉션에 연결하는 프로세스입니다. 이를 통해 다음을 수행 할 수 있습니다.

- 사이트 페이지에 컬렉션의 내용 표시

- 사용자 입력을 수집하여 컬렉션에 저장

 

 

요소를 컬렉션의 데이터에 연결하려면 먼저 페이지에 데이터세트를 추가한 다음 컬렉션에 연결해야합니다. 이렇게하면 페이지 요소에서 사용할 수 있는 컬렉션을 만들 수 있습니다.

 

 

데이터세트 제어 (A dataset controls) :

- 요소에서 사용할 수 있는 컬렉션

- 요소는 컬렉션의 콘텐츠의 표시, 추가, 수정등의 작업을 할 수 있으며, 이는 컬렉션의 권한에 의해 영향을 받습니다. 자세한 내용은 데이터세트 모드 및 수집 권한 작업을 참조합니다.

- 표시된 내용의 필터링 또는 정렬 여부

 

 

노트 :

데이터세트는 에디터에서 요소로 나타나지만 게시된 사이트에는 표시되지 않습니다. 페이지에 원하는 곳에 넣을 수 있습니다.

 

 

 

페이지의 요소와 컬렉션 사이의 데이터세트를 브리지 또는 커넥터라고 생각할 수 있습니다. 먼저 데이터세트를 컬렉션에 연결한 다음 요소를 데이터세트에 연결합니다. 그러면 아래 그림과 같이 요소가 컬렉션에 연결됩니다.

 

 

 

 

 

 

동일한 데이터세트에 연결된 페이지의 모든 요소는 데이터세트에서 정의한대로 컬렉션의 콘텐츠와 함께 작동합니다. 또한 데이터세트는 현재 컬렉션에 있는 항목을 추적합니다. 이는 사용자의 입력을 캡처하는 방법뿐만 아니라 컬렉션의 콘텐츠가 표시되는 방식에 영향을 줍니다. 

 

 

어떻게 작동하는지 몇 가지 예를 살펴봅니다.

 

 

 

콘텐츠 표시 (Displaying Content)

레스토랑 사이트가 있고 방문자가 메뉴 옵션을 스크롤할 수 있게 하려고한다고 가정해봅니다. 메뉴의 모든 항목과 표시할 각 항목에 대한 컬렉션이 있습니다.

 

- 음식의 이름

- 언제 제공되는지 여부

- 애피타이저, 메인 또는 디저트인지 여부

- 음식에 대한 알레르기 정보

- 음식 사진

 

 

페이지의 각 항목을 표시하도록 디자인할 수 있지만 먼저 다음 작업을 수행해야 합니다.

 

- 컬렉션 요소에 다른 항목을 표시할 수 있도록 페이지의 요소를 연결합니다.

- 방문자가 음식을 스크롤 할 수 있도록 버튼을 페이지에 추가합니다.

- 요소가 동기화되도록 변경합니다. 즉, 한 요소가 컬렉션의 특정 항목에 대한 정보를 표시하면 모든 요소에 동일한 항목에 대한 해당 정보가 표시되어야 합니다.

 

 

 

페이지의 요소를 연결하여 컬렉션에 다른 항목을 표시합니다. (Connect the elements on the page so that they display different items in your collection)

요소를 설정하려면 페이지에 요소를 추가한 다음,  

 데이터 연결 아이콘을 사용합니다. 모든 데이터를 동일한 데이터세트에 연결합니다. 또한 컬렉션에서 표시할 입력란(필드)를 정의할 수 있습니다.

 

 

 

 

방문자가 음식을 스크롤 할 수 있게 해주는 버튼을 페이지에 추가합니다. (Add buttons to your page that let visitors scroll through your dishes)

페이지에 버튼을 추가하여 방문자가 데이터세트의 이전 또는 다음 항목으로 이동할 수 있게 합니다. 이 버튼은 요소와 동일한 데이터세트에 연결되어야합니다.

 

 

 

요소가 동기화되도록 변경합니다. (Set up the elements so they change in sync)

방문자가 페이지에서 이전 또는 다음 버튼을 클릭하면 모든 요소가 컬렉션의 동일한 항목에 대한 콘텐츠를 표시합니다. 이는 데이터세트가 현재 포커스가 있는 항목을 추적하므로 동일한 데이터세트에 연결된 모든 요소가 함께 작동하기 때문에 작동합니다. 요소 중 하나가 현재 항목의 포커스를 변경하면 해당 데이터세트에 연결된 모든 요소가 변경됩니다.

 

 

 

 

 

콘텐츠 캡처 (Capturing Content)

방문자가 무료 저녁 식사에 등록할 수 있도록 식당 양식을 만들고 싶다고 가정해봅니다. 사용자 입력 요소를 사용하여 방문자가 원하는 정보를 수집하도록 양식을 설정합니다.

 

여기에서도 

 데이터 연결 아이콘을 사용합니다.

 

각 요소를 동일한 데이터세트에 연결합니다. 또한 방문자가 각 입력 요소에 입력하는 데이터를 저장하는 데 사용할 컬렉션의 입력란(필드)를 정의합니다.

 

 

 

팁 :

사용자가 컬렉션에 쓸 수 있도록 컬렉션 및 데이터세트에 대한 사용 권한을 설정하는 것을 잊지 않도록 합니다.

 

 

제출 버튼을 만들어야 합니다. 방문자가 양식 작성을 완료하면 이 버튼을 클릭하여 정보를 컬렉션에 제출합니다.

 

이 버튼은 사용자 입력 요소와 동일한 데이터세트에 연결해야 합니다. 방문객이 제출을 클릭하면 각 사용자 입력 요소에 입력한 모든 정보가 컬렉션에 새 항목을 만듭니다.

 

이는 데이터세트가 컬렉션의 현재 항목을 추적하기 때문에 작동합니다. 이 경우 데이터세트가 컬렉션의 새로운 빈 항목을 가리키고 있습니다. 모든 요소가 동일한 데이터세트에 연결되어 있으므로 모두 동일한 항목에 저장됩니다.

 

 

 

 

동적 페이지 데이터세트 (About Dynamic Page Datasets)

동적 페이지를 만들면 동적 페이지 데이터세트가 페이지에 자동으로 추가됩니다. 일반 데이터세트와 마찬가지로 동적 페이지 데이터세트를 사용하면 페이지 요소를 컬렉션에 연결할 수 있습니다. 동적 페이지 데이터세트는 일반 데이터세트와 다른 몇 가지 방법이 있습니다.

 

동적 페이지가 표시할 수 있는 내용은 해당 URL에 의해 제어됩니다. 따라서 일반 데이터세트와 달리 동적 페이지 데이터세트에서는 데이터세트가 연결된 컬렉션을 변경할 수 없습니다.

 

URL은 페이지에서 표시할 수 있는 내용을 제어하므로 컬렉션의 내용에 대한 필터 역할도 합니다. 여기에서도 페이지 설정의 URL 정의를 변경하여 콘텐츠 필터링을 변경합니다. 동적 페이지 데이터세트 설정을 사용하여 더 많은 필터를 추가하고 페이지의 내용을 정렬할 수 있습니다.

 

또한 페이지에서 동적 페이지 데이터세트를 삭제할 수 없습니다. 데이터세트를 제거하려면 동적 페이지를 일반 페이지로 변환해야합니다.

 

 

 

연관된 토픽)

윅스 (Wix) 코딩 예제 - 데이터베이스 컬렉션에 사용자 입력 저장 양식 만들기 (Wix Code Tutorial: Creating a Form to Store User Input in a Database Collection)

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

https://support.wix.com/en/article/about-connecting-page-elements-to-database-content