gazette-featured-content-thumbnail

[워드프레스로 모임서비스 만들기] 4. 모임 참가신청 받기

지난 시간에 이어 이번 시간엔 사용자가 모임에 참가신청을 할 수 있는 기능을 구현해 보기로 하겠습니다. 누구든 모임사이트에 방문하여 자기가 참가하고픈 모임이 있으면 참가신청을 할 수 있는 기능입니다.

만들 내용

사용자가 모임 페이지에 들어가서 참가신청을 클릭하면 아래 그림과 같은 참가신청 폼이 나옵니다. 이 때 사용자는 모임 참석에 필요한 정보를 입력한 후 저장하기 버튼을 누르면 참가자로 등록이 되어 참가자 명단에 표시됩니다.

그림1. 참가신청하기

준비물

다음 1개의 플러그인이 필요합니다. 설치하지 않으셨다면 지금 설치하면 됩니다. (설치 방법은 생략)

  • Formidable Pro 참가신청 폼을 작성하고 참가신청을 받는데 사용(유료 버전)

참가신청 폼 만들기

처음 할 일은 참가신청 폼(양식)을 만드는 일입니다. Formidable 플러그인이 설치되었다면 다음과 같이 어드민 대시보드 ⟫ Formidable ⟫ Forms 메뉴에서 ‘Add New’ 하여 새 폼을 만들 수 있습니다. 적당한 이름으로 폼이름을 지정하고 우측의 필드 메뉴에서 필요한 필드들을 드래그 드롭 방식으로 화면에 가져다 놓으면 간단하게 폼이 완성됩니다.

그림2. 참가신청 폼 만들기

이 때 유의할 점 중 하나는, 우리가 로그인한 사용자만 참가신청을 할 수 있도록 할 것이기 때문에, 폼에 히든 필드(hidden field)로 사용자ID 값을 추가해 주어야 한다는 점입니다. Formidable 필드 중 하나인 ‘User ID (hidden)’을 선택하여 폼에 가져다 놓으면 아래 그림과 같이 이 값이 자동으로 폼에 추가됩니다.
그림3. User ID 필드 추가

이 때 참가자 이름 필드 속에 있는 ‘[display name]’은 디폴트 값으로, 이렇게 디폴트 값을 지정해 놓으면 참가자의 이름이 참가신청 폼에 자동으로 입력됩니다. 물론 이 기능 역시 Formidable에서 제공하며 우측 메뉴의 ‘Default Values’에서 필요한 값을 끌어다 놓으면 됩니다.

참가신청 페이지

참가신청 폼을 저장하였다면, 이제 이렇게 만든 폼을 화면에 표시하는 일이 남았습니다. 참가신청만을 위한 별도 폼을 만들 수도 있겠지만 여기서는 모임 소개 페이지의 하단에 참가신청 폼을 붙이는 방법으로 구현해 보겠습니다. 간단한 방법은 템플릿 파일을 수정하는 것입니다. 모임 페이지의 템플릿을 수정하면 되는데, 여기서는 모임(moim)이 별도의 커스텀 포스트 유형인 점에 착안, 새로 single-moim.php 라는 템플릿 파일을 하나 만들어 추가하는 방식을 쓰겠습니다. 코드 내용은 기존 템플릿 파일 중에 single.php 가 있으면 그 내용을 가져다 그대로 복사하여 붙여넣으면 간단합니다.

모임 페이지를 위한 템플릿 파일(single-moim.php)을 만들었다면 이제 참가신청 폼이 들어갈 곳에 다음과 같이 코드를 추가하면 됩니다.

<div id="attendants" class="comments-area">
    <h2 class="comments-title">참가신청</h2>
    <?php echo do_shortcode('[formidable id=11]'); ?>
</div>    

여기서 실제 폼을 출력하는 부분은 do_shortcode() 함수가 있는 한 줄 뿐이며, 이 부분은 앞서 만든 참가신청 폼의 단축코드(shortcode)를 화면에 표시하는 부분입니다. 단축코드는 폼의 Settings 메뉴를 열어 보면 우측 상단에서 확인할 수 있으며, 단축코드 방식이 맘에 들지 않는 분들이라면 똑같은 기능이 PHP 코드로도 제공되기 때문에 직접 PHP 코드 방식으로 처리해도 무방합니다.

그림4. 폼 코드 추출하기

참고로, 위의 폼을 단축코드 방식이 아닌 PHP 코드 방식으로 처리하려면 코드는 아래와 같이 됩니다.

<div id="attendants" class="comments-area">
    <h2 class="comments-title">참가신청</h2>
    <?php echo FrmFormsController::get_form_shortcode( array( 'id' => 11 ) ); ?>
</div>    

로그인한 사용자만 참가신청!

현재 이 모임 사이트에서는 로그인한 사용자만 참가신청을 할 수 있도록 하려고 하기 때문에, 로그인 하지 않은 사용자인 경우 아래 그림과 같이 먼저 로그인을 하도록 처리를 하려고 합니다.

그림5. 로그인한 사용자만 참가신청

이 부분은 앞서 작성한 폼 출력 부분의 코드를 다음과 같이 약간만 수정하면 간단하게 해결됩니다.

<div id="attendants" class="comments-area">
    <h2 class="comments-title">참가신청</h2>
    <?php if ( is_user_logged_in() ): ?>
        <?php echo FrmFormsController::get_form_shortcode( array( 'id' => 11 ) ); ?>
    <?php else: ?>
        <p class="info">
            참가신청를 하려면 <a href="<?php echo wp_login_url( get_permalink() ); ?>" title="Login">로그인</a> 하세요!
        </p>    
    <?php endif; ?>
</div>    

참가신청 처리하기

이제 사용자가 참가신청 양식을 작성하여 참가신청을 하면 워드프레스에 참가자 정보가 저장이 됩니다. 참가신청 양식에 맞춰 입력된 데이터를 저장하는 것은 Formidable 플러그인이 알아서 처리하는 부분이라, 참가신청 데이터를 저장하기 위해 별도로 코딩을 하거나 할 필요는 없지만, 한 가지 처리할 부분이 있습니다. 바로 폼에 모임의 ID값을 추가해주는 부분입니다. 이 값이 없으면 Formidable이 어느 모임에 대한 참가신청인지를 알 수 없기 때문이며, 이 값은 다음과 같이 Formidable이 제공하는 액션 훅(action hook)을 이용하면 됩니다. 테마의 functions.php 파일에 다음 코드를 추가합니다.

add_action( 'frm_entry_form', 'my_frm_entry_form' );
function my_frm_entry_form( $form ) {
  echo '<input type="hidden" name="post_id" value="'.get_the_ID().'">';
}

이제 사이트에 가서 모임 참가신청을 해 보면 제대로 작동하는 것을 확인할 수 있을 것입니다. 참가신청 결과(참가신청자 목록)는 Formidable 플러그인에 의해 저장되며 관리자 대시보드의 Formidable 메뉴 아래 참가신청 폼의 ‘Entries’ 메뉴에서 다음과 같이 확인할 수 있습니다.

그림6. 관리자 대시보드 참가신청자 목록

## 참가신청자 목록 보기

그런데 참가신청자는 관리자만 보아서는 안되고 모임 페이지에도 표시가 되어야 합니다. 그러려면 약간의 추가 작업이 더 필요하기도 하구요. 이제 이 부분을 만들어 보기로 하겠습니다.

그림7. 참가신청자 목록

이번에는 Formidable 플러그인에서 제공하는 View 기능을 이용할 차례입니다. 관리자 대시보드의 Formidable 메뉴에 가면 ‘Views’ 라는 메뉴가 있는 것을 확인할 수 있습니다. 이 뷰(View)는 말 그대로 입력된 엔트리 값을 화면에 출력하는 기능을 담당하는 부분입니다. Formidable에서는 뷰도 앞서 폼을 만드는 것과 마찬가지 방식으로 쉽게 구성할 수 있습니다.

‘참가신청자 목록’ 이라는 이름으로 새 뷰를 하나 만듭니다. 여기서는 아래 그림처럼 간단하게 뷰를 한번 구성해 보기로 하겠습니다.

그림8. 참가신청자 목록 View

그림에서 Before Content 부분은 참가신청자 목록 상단에 표시되는 참석자 수를 간단하게 표시하는 부분이고, 본문(Content) 영역에서 보는 [106 show="avatar" size=50] 부분은 사용자의 아바타 이미지를 표시하라는 말입니다. 106이라고 나와 있는 부분은 우측 메뉴에 있는 User ID 필드의 필드값이며, 여러분의 워드프레스 작업 환경에서는 다른 값이 올 수도 있으니 그 값을 사용하시면 되겠습니다.

이렇게 뷰를 작성했다면 이번에도 앞서와 마찬가지로 이 뷰를 화면에 출력하는 일만 남았습니다. 앞서 폼 작업 때와 마찬가지로 이번에도 Formidable에서 단축코드를 제공하기 때문에 그 단축코드(또는 PHP 코드)를 따다가 템플릿 속 적당한 곳에 붙여 넣어주면 끝입니다(여기서는 PHP 방식을 사용).

<?php echo FrmProDisplaysController::get_shortcode( array( 'id' => 97 ) ); ?>

그림9. 참가신청자 목록 View 단축코드

이제 모임 페이지에서 보면 참가신청자 목록이 제대로 표시되는 것을 확인할 수 있을 것입니다.

오늘은 여기까지 입니다.

물론 오늘 내용에는 아직 부족한 부분들이 더러 있습니다. 예를 들면, 이미 모임에 참가신청을 한 참가자인 경우 중복 신청을 못하도록 기능이라든지, 참가자가 자신이 참가신청한 모임의 목록을 관리하는 기능이나 참가신청을 취소하는 기능과 같은 것들입니다. 이 부분들은 그 기능 하나하나가 각각 별도의 포스팅에 할애할 만큼의 분량이 되기 때문에 다음 기회로 미루도록 하겠습니다.

오늘 소개한 참가신청받기 기능은 사실 Formidable 플러그인의 도움으로 쉽게 구현할 수 있었지만, 참가신청을 받는 기능은 이것 말고도 여러 가지 다른 방식으로 구현할 수 있습니다. 예를 들면, 앞서 새 모임 만들기를 구현할 때 사용한 ACF 플러그인을 이용하여 구현할 수도 있고 또는 댓글(comments)을 이용하는 방식도 가능할 것입니다. 물론 그 밖에도 다른 방법들이 더 많겠지만요.

Formidable 플러그인에는 지금 소개한 기능 말고도 더 다양한 기능들이 많이 있습니다. 필요하신 분들은 Formidable 문서를 참고하시면 될 듯 하며, 또한 오늘 다룬 내용과 관련된 소스코드는 Github에서 확인할 수 있습니다.

이번엔 Formidable을 다루다 보니 내용이 조금 길어졌는데요. 다음 시간에는 모임 장소와 시간 등의 정보를 추가하고 지역별로 모임을 분류하여 메뉴를 구성하는 부분을 다뤄 보도록 하겠습니다. 🙂


* 이 연재에서 사용한 전체 소스코드는 여기에서 내려 받을 수 있습니다.

“[워드프레스로 모임서비스 만들기] 4. 모임 참가신청 받기”에 대한 0개의 생각