윅스 (Wix) 코딩 예제 - 나만의 멤버 영역 만들기 (Wix Code Tutorial: Building Your Own Members Area)

윅스 (Wix) 코딩 예제 - 나만의 멤버 영역 만들기 (Wix Code Tutorial: Building Your Own Members Area)

 

 

 

설명)

 

노트 :

이제 코드를 사용하지 않고도 회원 영역을 사이트에 추가할 수 있습니다. 코드를 사용하지 않고 현재 로그인한 사용자를 기반으로 항목을 표시하는 페이지를 만들 수도 있습니다. 그러나 현재 데이터베이스 컬렉션 및 Wix Code API를 사용하여 구성원 정보에 액세스할 수 없습니다. 회원 정보를 직접 캡처하여 표시하려면 아래에 설명된 방법을 사용합니다.

 

 

 

 

이 글에서는 사이트의 등록된 각 사용자에 대한 멤버 프로필 페이지를 만드는 방법을 보여줍니다. 동적 프로필 페이지의 데이터는 사용자가 사이트에 처음 로그인할 때 만들어집니다. 사용자는 언제든지 개인 프로필을 보고 업데이트할 수 있습니다.

 

노트 :

사이트 안팎에 사용자를 로그인하는 기능은 게시된 사이트를 볼 때만 완벽하게 작동합니다. 미리보기 모드에서는 회원 프로필 페이지를 완전히 테스트할 수 없습니다.

 

 

 

 

회원 프로필 페이지를 만들기 (To create our member profile pages we build) :

- 회원 컬렉션

- 프로필 페이지

- 업데이트 페이지

- 로그인 페이지

 

 

이 글에서는 사용자가 다음 개념들을 잘 알고 있다고 가정합니다.

- 데이터베이스 컬렉션

- 컬렉션 권한

- 페이지 권한

- 동적 항목 페이지

- 데이터세트 모드

- 데이터 바인딩(연결)

 

 

 

회원 컬렉션 (Members Collection)

우리는 모든 멤버 데이터를 저장하는 Members라는 컬렉션을 만듭니다. 컬렉션의 각 항목은 다른 멤버입니다. 멤버에 대한 액세스를 제한하여 자신의 항목만 보고 업데이트할 수 있도록 Members 컬렉션의 사용 권한을 Custom Use로 설정하고 다음을 선택합니다.

 

- 이 컬렉션의 컨텐츠를 읽을 수 있는 사람은 누구입니까? - 사이트 회원 작성자 (Site member author)

- 이 컬렉션의 컨텐츠를 작성할 수 있는 사람은 누구입니까? - 사이트 멤버 (Site member)

- 이 컬렉션의 컨텐츠를 누가 업데이트할 수 있습니까? - 사이트 회원 작성자 (Site member author)

- 누가 이 컬렉션에서 콘텐츠를 삭제할 수 있습니까? - 관리자 (Admin)

 

컬렉션에는 원하는 멤버 데이터가 모두 포함될 수 있습니다. 이 예에서는 다음 입력란(필드)를 사용합니다.

 

 

입력란(필드) 이름 (Field Name)	입력란(필드) 키 (Field Key)	유형(Type)
제목(Title)	title	Text
이름(First Name)	firstName	Text
성(Last Name)	lastName	Text
이메일(Email)	email	Text
전화(Phone)	phone	Text
대하여(About)	about	Text

 

 

 

프로필 페이지 (Profile Page)

그런 다음 사용자 프로필을 표시할 페이지를 만듭니다. Members 컬렉션에 연결된 동적 항목 페이지입니다. 동적 항목 페이지를 생성하기 때문에 각 구성원을 고유하게 식별하는 URL에 추가할 입력란(필드)를 선택해야 합니다. 여기서 우리는 각 구성원의 자동 생성 ID를 사용하여 고유하게 식별합니다.

 

URL은 다음과 같습니다.

 

 

 

 

이 페이지를 사용하여 데이터를 표시하기 때문에 동적 데이터세트의 모드를 읽기 전용으로 설정합니다.

또한 로그인한 사용자만 페이지에 접근할 수 있도록 페이지 설정의 권한 탭을 사용하여 페이지의 권한을 구성원 전용으로 설정합니다.

페이지 자체는 사용자 프로필에 정보를 표시하는 요소로 설계되었습니다. 이 예에서는 페이지의 동적 데이터세트를 통해 Members 컬렉션의 입력란(필드)에 연결된 텍스트 요소를 의미합니다.

마지막으로 버튼 요소를 추가합니다. 업데이트 페이지를 만들면 버튼 링크를 연결하여 현재 사용자의 업데이트 페이지로 이동합니다.

회원이 프로필 페이지를 확인하면 다음과 같은 내용을 볼 수 있습니다.

 

 

 

 

페이지 업데이트 (Update Page)

업데이트 페이지는 프로필 페이지와 매우 유사합니다. 또한 Members 컬렉션에 연결된 동적 항목 페이지입니다. 또한 회원 ID를 고유한 식별 입력란(필드)로 사용합니다. 그러나 사이트에서 동일한 URL을 가진 두 페이지를 가질 수 없기 때문에 다음과 같이 URL에 Update를 추가합니다.

 

 

 

 

이 페이지에 데이터를 표시하고 사용자가 데이터를 편집할 수 있도록 하기 때문에 동적 데이터세트의 모드를 읽기 및 쓰기로 설정합니다.

다시 한번 우리는 로그인한 사용자만 페이지에 접근할 수 있도록 페이지 설정의 권한 탭을 사용하여 페이지의 권한을 구성원 전용으로 설정합니다.

이번에는 페이지가 사용자 프로필의 정보를 표시하고 편집하기 위한 요소로 디자인되었습니다. 이 예에서는 드롭다운 요소, 일부 텍스트 입력 요소 및 텍스트 상자 요소를 사용합니다. 이 모든 요소는 페이지의 동적 데이터세트를 통해 Members 컬렉션의 입력란(필드)에 연결됩니다.

마지막으로 편집된 데이터를 제출하기 위한 버튼 요소를 추가합니다. 다음과 같이 데이터 연결 버튼을 사용하여 제출 버튼을 연결합니다.

 

 

 

 

회원이 자신의 업데이트 페이지를 볼 때 다음과 같은 내용을 볼 수 있습니다 :

 

 

 

이제 업데이트 페이지를 만들었으니 프로필 페이지로 돌아가서 업데이트 버튼을 연결할 수 있습니다. 다음과 같이 데이터 연결 버튼을 사용하여 업데이트 버튼을 연결합니다.

 

 

 

 

로그인 페이지 (Login Page)

이 예에서는 사이트에 로그인하기 위해 회원 전용 페이지가 있습니다. 그러나 이 페이지의 내용을 모든 페이지에 추가하거나 모든 페이지에 표시 할 수도 있습니다.

 

노트 :

전용 로그인 페이지가 있으므로 아래 코드를 코드 패널의 페이지 탭에 추가합니다. 그러나 모든 페이지에 요소를 표시하는 경우 코드 패널의 사이트 탭에 아래 코드를 추가해야 합니다.

 

 

 

로그인 페이지의 디자인은 매우 간단합니다. 여기에는 두 개의 버튼이 있습니다. 첫 번째 버튼은 현재 사용자가 이미 로그인했는지 여부에 따라 로그인 또는 로그아웃하는 데 사용됩니다. 두 번째 버튼은 회원의 프로필 페이지로 이동하는 데 사용됩니다. 이미 로그인한 사용자에게만 표시됩니다.

 

 

 

 

코드 (Code)

로그인 페이지의 코드는 네 부분으로 구성됩니다.

- 나머지 코드에서 사용된 API 가져오기

- 로드될 때 페이지를 설정하기위한 onReady 이벤트 핸들러

- 다음 중 하나의 로그인 버튼 onClick 이벤트 핸들러입니다.

a. 사용자 로그인 및 최초 로그인인 경우 Members 컬렉션에 새 항목 만들기

b. 이미 로그인한 사용자를 로그아웃합니다.

- 구성원을 프로필 페이지로 이동하기위한 프로필 버튼 onClick 이벤트 핸들러

 

 

 

우리는 다음 API를 사용합니다.

- wix-users - 현재 사용자에 대한 정보를 얻고 사용자를 로그인 및 로그아웃합니다.

- wix-data - Members 컬렉션에 쿼리하고 삽입합니다.

- wix-location - 다른 페이지로 이동하는 데 사용합니다.

 

 

따라서 우리의 import 코드는 다음과 같습니다 :

 

import wixUsers from 'wix-users';
import wixData from 'wix-data';
import wixLocation from 'wix-location';

 

 

로그인 페이지가 로드되면 버튼을 설정하려고합니다.

- 사용자가 로그인한 경우 로그인 버튼의 라벨을 Logout으로 지정하고 My Profile 버튼을 표시하려고 합니다.

- 사용자가 로그인하지 않은 경우 로그인 버튼의 라벨을 로그인으로 지정하고 내 프로필 버튼를 숨기려고합니다.

 

 

따라서 onReady() 코드는 다음과 같습니다.

 

$w.onReady( () => {
  if(wixUsers.currentUser.loggedIn) {
    $w("#loginButton").label = "Logout";
    $w("#profileButton").show();
  }
  else {
    $w("#loginButton").label = "Login";
    $w("#profileButton").hide();
  }
} );

 

 

 

노트 :

위의 코드를 최적화하는 방법은 아래 부록을 참조합니다.

 

 

 

 

우리 페이지의 대부분의 로직은 로그인 버튼의 onClick 이벤트 핸들러에 포함되어 있습니다.

 

이벤트 핸들러에서 다음과 같은 작업을 수행하려고합니다.

- 사용자가 로그인하여 버튼을 클릭하면,

a. 사용자를 로그아웃합니다.

b. 버튼의 라벨을 로그아웃으로 변경합니다.

c. 내 프로필 버튼을 숨깁니다.

- 사용자가 로그아웃한 상태에서 버튼을 클릭하면,

a. 사용자에게 로그인하라는 메시지를 표시합니다.

b. Members 컬렉션을 쿼리하여 현재 사용자의 항목이 있는지 확인합니다.

1. 현재 사용자에 대한 항목이없는 경우 항목을 만듭니다.

c. 버튼의 라벨을 로그인으로 변경합니다.

d. 내 프로필 버튼를 표시합니다.

 

로그인 버튼을 선택하여 이벤트 핸들러를 추가하고 Properties 패널을 사용하여 onClick 이벤트에 대한 핸들러를 추가합니다.

그런 다음 이벤트 핸들러 코드를 추가합니다.이 코드는 다음과 같습니다.

 

export function loginButton_click(event) { 
  // user is logged in
  if(wixUsers.currentUser.loggedIn) {
    // log the user out
    wixUsers.logout()
      .then( () => {
        // update buttons accordingly
        $w("#loginButton").label = "Login";
        $w("#profileButton").hide();
    } );
  }
  // user is logged out
  else {
    let userId;
    let userEmail;
  
    // prompt the user to log in 
    wixUsers.promptLogin( {"mode": "login"} )
      .then( (user) => {
        userId = user.id;
        return user.getEmail();
      } )
      .then( (email) => {
        // check if there is an item for the user in the collection
        userEmail = email;
        return wixData.query("Members")
          .eq("_id", userId)
          .find();
      } )
      .then( (results) => {
        // if an item for the user is not found
        if (results.items.length === 0) {
          // create an item
          const toInsert = {
            "_id": userId,
            "email": userEmail
          };
          // add the item to the collection
          wixData.insert("Members", toInsert)
            .catch( (err) => {
              console.log(err);
            } );
        }
        // update buttons accordingly
        $w("#loginButton").label = "Logout";
        $w("#profileButton").show();
      } )
      .catch( (err) => {
        console.log(err);
      } );
  }
}

 

 

 

프로필 버튼을 클릭하면 이벤트 핸들러를 사용하여 멤버를 개인 프로필 페이지로 보냅니다.

프로필 버튼을 선택하여 이벤트 핸들러를 추가하고 속성 패널을 사용하여 onClick 이벤트에 대한 핸들러를 추가합니다.

그런 다음 이벤트 핸들러 코드를 추가합니다.이 코드는 다음과 같습니다.

 

 

export function profileButton_click(event) {
  wixLocation.to(`/Members/${wixUsers.currentUser.id}`); 
}

 

 

 

API 목록 (API List)

다음 API는 이 글의 코드에서 사용된다. 자세한 내용은 API 참조 문서를 참조합니다.

• wix-users - 현재 사용자에 대한 정보를 얻고 사용자를 로그인 및 로그아웃합니다.

• wix-data - 컬렉션에 쿼리하고 삽입합니다.

• wix-location - 위치를 탐색합니다.

 

 

 

 

 

연관된 토픽)

윅스 (Wix) 코딩 - 여러 동적 페이지에 고유한 URL을 부여하기 (About Making Multiple Dynamic Page URLs Unique)

윅스 (Wix) 코딩 - 내 동적 페이지는 어떤 콘텐츠를 표시합니까? (What Content Will My Dynamic Page Display?)

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

https://support.wix.com/en/article/wix-code-tutorial-building-your-own-members-area