윅스 (Wix) 코딩 예제 - 데이터베이스 컬렉션에 데이터 편집 양식 만들기 (Wix Code Tutorial: Creating a Form for Editing Data in a Database Collection)

윅스 (Wix) 코딩 예제 - 데이터베이스 컬렉션에 데이터 편집 양식 만들기 (Wix Code Tutorial: Creating a Form for Editing Data in a Database Collection)

 

 

 

설명)

이 예제에서는 사용자가 데이터베이스 컬렉션의 기존 데이터를 편집할 수 있도록 사용자 정의 양식을 작성하는 방법을 학습합니다. 사용자 입력 요소를 사용하여 양식을 배치하고 데이터베이스 컬렉션을 만든 다음 이를 데이터세트를 사용하여 이러한 요소에 연결하는 방법을 설명합니다. 마지막으로 미리보기 모드에서 양식을 테스트하고 사용자가 콘텐츠를 편집할 수 있도록 사이트를 게시합니다.

 

 

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 Form)

양식에는 사용자가 수집하려는 정보를 입력할 수 있는 요소가 포함되어야 합니다. 이 기능을 설정하려면 추가 메뉴에서 사용할 수 있는 사용자 입력 요소를 사용해야합니다.

 

시작하려면 :

1. 추가 메뉴로 이동하여 사용자 입력을 선택합니다.

2. 요소를 사용자 입력에서 페이지로 드래그하여 양식을 디자인하고 배치합니다. 입력, 라디오 버튼, 드롭다운 목록 및 업로드 버튼과 같은 요소 중에서 선택할 수 있습니다.

 

 

 

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

사용자 입력 요소를 추가하고 나면 설정 패널에서 각 요소를 구성해야 합니다. 설정에는 입력 유형, 표시자 텍스트, 초기 값, 요소가 필수 입력란(필드)인 경우와 같은 항목이 포함됩니다. 요소는 읽기 전용입니다.

 

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

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

2. 양식의 각 사용자 입력 요소에 대해 이를 반복합니다.

이제 사용자 입력 요소를 컬렉션에 연결해야 합니다. 데이터세트를 사용하여 다음 단계에서 다루겠습니다.

 

 

 

 

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

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

 

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

1. 추가 메뉴에서 데이터베이스를 클릭한 다음 데이터세트를 클릭합니다.

2. 페이지에 추가된 데이터세트를 선택하고 데이터세트 관리를 클릭합니다.

3. 데이터세트 설정 창의 컬렉션 연결에서 컬렉션을 선택합니다.

4. 모드에서 읽기 및 쓰기를 선택합니다.

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

6. 패널을 닫습니다.

 

 

 

7. 양식 요소 연결하기 (Connect Your Form Elements)

데이터세트를 구성한 후에는 요소를 해당 데이터세트에 연결할 수 있습니다. 양식의 각 요소로 이동하여 동일한 데이터세트에 연결해야합니다. 요소를 연결할 때마다 값이 연결될 컬렉션의 입력란(필드)도 정의합니다.

 

사용자 입력 요소를 연결하려면,

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

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

2. 정보가 저장될 입력란(필드)를 컬렉션에서 선택합니다.

3. 양식의 각 사용자 입력 요소에 대해 이를 반복합니다.

다음 단계에서는 데이터세트에서 편집 작업을 수행할 수 있는 버튼을 만듭니다.

 

 

 

 

 

 

 

8. 찾아보기 및 제출 버튼 만들기 (Create Browse and Submit Buttons)

이제 모든 요소가 동일한 데이터세트를 통해 동일한 컬렉션에 연결되었으므로 사용자가 정보를 찾아보고 편집할 수 있어야 합니다. 이렇게하려면 페이지에 버튼을 추가하고 다른 요소와 동일한 데이터세트에 연결하고 클릭 동작을 정의합니다.

 

양식을 사용하여 사용자가 수행할 수 있는 작업에 따라 제출, 다음 데이터세트 항목, 이전 데이터세트 항목, 새로 만들기, 되돌리기 및 삭제와 같은 작업에 대한 버튼를 만들 수 있습니다.

 

대부분의 경우 사용자는 최소한 다음 및 이전 버튼을 생성하여 사용자가 데이터를 탐색할 수 있도록 할 수 있습니다. 사용자가 다음 또는 이전 버튼을 클릭하면 현재 항목에서 변경된 모든 정보가 저장됩니다.

 

버튼를 만들려면 :

1. 페이지에 버튼을 추가하고 해당 기능에 맞게 텍스트를 변경합니다.

2. 버튼을 클릭합니다. 

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

3. 연결 버튼 패널에서 다음을 수행합니다.

1. 데이터세트를 선택합니다.

2. 링크 대상에서 버튼의 동작을 선택합니다.

 

사용자가 데이터를 편집하면 데이터가 저장되기 전에 유효성이 검사됩니다.

 

 

 

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)

사이트를 게시하면 사이트 방문자가 양식을 사용할 수 있습니다. 방용자가 게시된 사이트에서 양식의 데이터를 편집하면 양식 데이터가 라이브 데이터베이스에 저장됩니다.

 

사용자가 편집한 정보를 보려면 다음을 수행합니다.

1. 위쪽 표시 줄에서 설정을 클릭한 다음 내 대시보드를 클릭합니다.

2. 사이드 바 메뉴에서 데이터베이스를 누릅니다.

3. 라이브 데이터를 보려면 컬렉션을 클릭합니다.

 

다음 단계

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

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

- 윅스 (Wix) 코딩 - 데이터 후크 (Wix Code: About Data Hooks) - 데이터세트 후크 및 컬렉션 후크를 사용하여 유효성 검사를 추가합니다.

- 윅스 (Wix) 코딩 - API 개요 (Wix Code: API Overview) - 윅스 코드 API(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-creating-a-form-for-editing-data-in-a-database-collection