윅스 (Wix) 코딩 - 데이터베이스 콘텐츠 일반 페이지에 표시하기 (Wix Code Tutorial: Displaying Database Content on a Regular Page)

윅스 (Wix) 코딩 - 데이터베이스 콘텐츠 일반 페이지에 표시하기 (Wix Code Tutorial: Displaying Database Content on a Regular Page)

 

 

 

설명)

이 예제에서는 컬렉션의 데이터를 표시하는 사용자 지정 페이지를 작성하는 방법을 학습합니다. 페이지 요소들을 배치하고, 데이터베이스 콜렉션을 작성하고, 데이터세트를 사용하여 이러한 요소에 연결하는 방법을 설명합니다. 마지막으로 미리보기 모드에서 페이지를 테스트하고 사이트를 방문한 사용자가 귀하의 데이터를 볼 수 있도록 사이트를 게시합니다.

 

노트 :

이 예제에서는 컬렉션의 콘텐츠를 표시하는 일반 페이지를 만듭니다. 컬렉션의 콘텐츠를 표시하는 동적 페이지를 만드는 방법에 대한 자세한 내용은 예제 : 동적 항목 페이지를 사용하여 컨텐츠 표시를 참조합니다.

 

1. 개발자 도구 활성화 (Turn on Developer Tools)

윅스 코드(Wix Code)는 윅스 에디터(Wix Editor)에 고급 기능을 추가하여 보다 상호작용하는 동적인 사이트를 만들 수 있도록 합니다.

 

개발자 도구를 사용하려면 다음 단계를 따릅니다.

에디터 맨 위 상단 메뉴에서 코드를 클릭한 다음 [개발자 도구 활성화]를 클릭합니다.

 

이 작업을 완료하면 에디터에서 몇 가지 변경 사항을 확인할 수 있습니다.

• 속성 패널이 나타납니다. 창을 닫으면 도구 메뉴에서 다시 열 수 있습니다.

• 코드 패널이 에디터의 맨 아래에 추가됩니다.

• 사이트 구조 사이드 바가 에디터의 왼쪽에 추가됩니다.

• 데이터베이스 및 사용자 입력을 포함하여 추가 메뉴에서 더 많은 요소들을 사용할 수 있습니다.

 

 

 

 

 

 

2. 데이터베이스 컬렉션 만들기 (Create a Database Collection)

데이터베이스 컬렉션은 사이트에 필요한 콘텐츠를 저장하거나 방문자가 제출한 정보를 수집하는 곳입니다. 컬렉션을 만들 때 해당 컬렉션의 사용 권한을 정의해야 합니다. 이를 통해 방문자가 컬렉션의 데이터로 수행할 수 있는 작업을 제어 할 수 있습니다. 여기에는 방문자에게 표시할 콘텐츠를 저장할 빈 컬렉션이 추가됩니다.

 

컬렉션을 만들려면 :

1. 사이트 구조 사이드 바에서 데이터베이스 옆의 + 아이콘을 클릭하고 새 컬렉션을 선택합니다. "데이터베이스 컬렉션 소개" 화면이 나타나면 작성 시작을 누릅니다.

2. 데이터베이스 컬렉션 만들기 화면에서 컬렉션 이름을 지정합니다.

3. 드롭다운 목록에서 컬렉션에 사용할 용도를 선택합니다. 어떤 방문자가 데이터를 읽고, 쓰고, 수정하고, 삭제할 수 있는지 생각해고, 사이트 콘텐츠 사전(미리) 설정등과 같은 방문자가 콘텐츠를 볼 수 있도록 허락하는 콘텐츠 사전(미리) 설정 옵션들 중에 하나를 선택해야합니다.

4. 컬렉션 작성을 누릅니다.

데이터 관리자가 열리고 데이터베이스 컬렉션에 컨텐츠를 추가할 수 있는 스프레드 시트 스타일의 테이블이 나타납니다.

 

 

 

 

 

3. 데이터베이스 컬렉션 설정 (Set Up Your Database Collection)

방문자가 보기를 원하는 각 정보의 입력란(필드)를 추가한 다음 데이터를 입력합니다.

 

컬렉션을 설정하려면 다음 단계를 따릅니다.

1. 해더 행의 오른쪽에 있는 데이터 관리자에서 + 기호를 클릭하여 컬렉션에 입력란(필드)를 추가합니다.

2. 방문자가 보기를 원하는 정보와 일치하도록 입력란(필드)를 설정합니다. 입력란(필드)의 내용과 일치하는 올바른 데이터 유형을 선택해야 합니다.

3. 계획한 각 페이지 요소의 입력란(필드)를 정의합니다.

4. 컬렉션에 데이터를 입력합니다.

 

 

 

 

 

4. 페이지 디자인하기 (Design Your Page)

페이지에는 방문자가 표시하려는 정보를 볼 수 있는 요소가 포함되어야 합니다.

 

시작하려면 :

1. 추가 메뉴로 이동하여 컬렉션의 필드 유형과 일치하는 요소 유형을 포함하는 그룹을 선택합니다.

2. 요소들을 페이지로 드래그하여 페이지를 디자인하고 배치합니다. 텍스트 및 이미지와 같은 요소들을 선택할 수 있습니다.

 

 

 

 

 

 

5. 요소 설정 (Set Up Your Elements)

페이지 요소를 추가하면 설정 패널에서 각 요소의 모양을 구성할 수 있습니다.

 

요소를 설정하려면 다음을 수행합니다.

1. 페이지 요소를 선택하고 설정 아이콘을 클릭한 다음 옵션을 사용하여 구성합니다.

2. 페이지의 각 요소에 대해 이를 반복합니다.

이제 요소들을 데이터베이스 컬렉션에 연결해야 합니다. 이를 위해 데이터세트를 사용합니다. 다음 단계에서 다루겠습니다.

 

 

 

 

 

6. 데이터세트 추가 및 구성 (Add and Configure a Dataset)

데이터세트는 요소들을 데이터베이스 컬렉션에 연결합니다. 데이터세트를 추가할 때 어떤 컬렉션에 연결할지, 방문자가 컬렉션을 읽고 쓸 수있게 할 것인지 등을 결정해야 합니다.

 

페이지에 데이터세트를 추가하려면 :

1. 추가 메뉴로 이동합니다. 데이터베이스를 클릭한 다음 데이터세트를 클릭합니다. 페이지에 데이터세트가 추가됩니다.

2. 데이터세트를 선택하고 데이터세트 관리를 클릭합니다. 데이터세트 설정 패널이 열립니다.

3. 컬렉션 연결에서 사용할 컬렉션을 선택합니다.

4. 모드에 대해 읽기 전용을 선택합니다.

5. 추가적으로 데이터세트에 대한 필터링 및 정렬을 설정할 수 있습니다.

6. 패널을 닫습니다.

 

 

 

 

 

7. 페이지 요소 연결 (Connect Your Page Elements)

데이터세트를 구성한 후에, 요소들을 해당 데이터세트에 연결할 수 있습니다. 페이지의 각 요소들로 이동하여 동일한 데이터 세트에 연결해야합니다. 요소를 연결할 때마다 값이 연결될 컬렉션의 입력란(필드)도 정의합니다. 일부 요소에는 여러 입력란(필드)에 연결할 수 있는 둘 이상의 속성이 포함되어 있습니다.

 

요소를 연결하려면 :

1. 요소를 선택하고 해당 요소를 클릭합니다. 

 데이터 버튼에 연결합니다.

2. 데이터베이스 컬렉션의 정보가 저장된 입력란(필드)를 선택합니다.

3. 페이지의 각 요소에 대해 이 작업을 반복합니다.

다음 단계에서는 이전 및 다음 버튼을 만들어 데이터세트의 요소들을 탐색합니다.

 

 

 

 

8. 이전 및 다음 버튼 만들기 (Create Previous and Next Buttons)

이제 모든 요소가 동일한 데이터세트를 통해 동일한 컬렉션에 연결되었으므로 방문자가 정보를 찾아볼 수 있어야 합니다. 이렇게 하려면 페이지에 두 개의 버튼을 추가하고 다른 요소들로서 동일한 데이터 세트에 연결하여 클릭 동작에 대해 지정해야 합니다.

 

이전 및 다음 버튼을 만들려면 :

1. 페이지에 두 개의 단추를 추가하고 텍스트를 Previous 및 Next로 변경합니다.

2. 버튼을 클릭합니다. 

 데이터 버튼에 연결합니다.

3. 연결 버튼 패널에서 데이터세트를 선택합니다.

4. 링크 대상에서 첫 번째 버튼은 이전을 선택하고 두 번째 버튼은 다음을 선택합니다.

 

 

 

 

 

9. 페이지 테스트 (Test Your Page)

이제 미리보기 모드에서 페이지를 테스트할 수 있습니다. 보시는 내용은 윅스 에디터(Wix Editor)에서만 사용되며 미리보기 모드에서만 볼 수 있는 샌드박스 데이터베이스(Sandbox Database)에 있습니다.

 

페이지를 테스트하려면 :

1. 미리보기를 클릭합니다.

2. 다음 및 이전 버튼을 클릭합니다.

3. 에디터로 돌아갑니다.

 

 

 

 

 

 

10. 사이트 게시 (Publish Your Site)

이제 방문자가 콘텐츠를 볼 수 있도록 사이트를 게시할 차례입니다.

 

사이트를 게시하면 샌드박스 데이터베이스의 모든 입력란을 포함하는 빈 버전의 컬렉션이 만들어집니다. 방문자가 사이트의 게시된 버전에서 볼 수 있는 콘텐츠는 라이브 데이터베이스에 저장되며 계정 대시 보드의 윅스 데이터베이스 앱을 통해 액세스할 수 있습니다. 사이트를 게시한 후, 라이브 데이터베이스 컬렉션에 정보를 추가하려면 라이브 데이터베이스에 수동으로 데이터를 추가하거나 샌드박스 데이터베이스에서 데이터를 동기화할 수 있습니다.

 

라이브 데이터베이스 컬렉션을 설정하려면,

1. 에디터에서 게시를 클릭하여 사이트를 게시합니다.

2. 라이브 데이터베이스 컬렉션에 수동으로 데이터를 추가하려면 :

1. 계정 대시보드로 이동한 다음 내 응용 프로그램에서 윅스 데이터베이스를 선택합니다.

2. 컬렉션을 선택하고 실제 데이터를 입력합니다.

3. 샌드박스 컬렉션의 데이터를 동기화하려면 다음을 수행합니다.

1. 데이터 관리자 메뉴에서 동기화를 선택하여 모든 항목을 라이브로 복사를 선택합니다.

 

 

 

 

11. 라이브 데이터보기 (View Your Live Data)

사이트를 게시하면 방문자에게 데이터를 제공할 수 있습니다. 방문자가 페이지에 방문할 때, 라이브 데이터베이스에서 데이터를 볼 수 있습니다.

 

다음 단계

윅스 코드(Wix Code)를 사용하면 페이지에 더 많은 기능을 추가할 수 있습니다.

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

- 윅스 (Wix) 코딩 - 데이터세트를 사용하여 여러 데이터베이스 컬렉션 콘텐츠 표시하기 알아보기 (About Displaying Content from Multiple Database Collections Using Datasets) / 윅스 (Wix) 코딩 - 데이터베이스 컬렉션 참조 입력란(필드) (About Reference Fields in Database Collections) - 데이터세트 필터 및 참조 입력란(필드)를 사용하여 여러 컬렉션의 정보를 표시합니다.

- 코드로 페이지 기능을 향상시킵니다.

- CSV 파일에서 컬렉션으로 데이터를 가져옵니다.

- 윅스 (Wix) 코딩 - 데이터 후크 (Wix Code: About Data Hooks) - 데이터 컬렉션 후크 및 컬렉션 후크를 사용하여 사용자 지정을 추가합니다.

- 윅스 (Wix) 코딩 - API 개요 (Wix Code: API Overview) - Wix Code API를 사용하여 상호 작용 기능을 추가합니다.

- 윅스 (Wix) 코딩 - 자바스크립트 (JavaScript) (Wix Code: JavaScript Support) - 웹 모듈 및 데이터 세트 후크를 사용하여 타사의 웹 API 지원 데이터를 게시합니다.

 

 

 

연관된 토픽)

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

https://support.wix.com/en/article/wix-code-tutorial-displaying-database-content-on-a-regular-page