사용자정의를 게시판에서 출력할때 질문드립니다. ^^

write_form.html 파일에서...

<tr loop="$extra_keys=>$key,$val">
<th scope="row"><em cond="$val->is_required=='Y'">*</em> {$val->name}</th>
<td>{$val->getFormHTML()}</td>
</tr>

위의 부분을 아래와 같이 바꿔줍니다.

<tr>
<block loop="$extra_keys=>$key,$val">
<th scope="row"><em cond="$val->is_required=='Y'">*</em> {$val->name}</th>
<td>{$val->getFormHTML()}</td>
<!--@if($key!==count($extra_keys) && $key%2==0)-->
</tr>
<tr>
<!--@end-->
<!--@if($key==count($extra_keys) && $key%2!==0)-->
<th scope="row"></th>
<td></td>
<!--@end-->
</block>
</tr>

굳이 설명하자면, (1) tr태그가 아니라 tr태그 아래에 루프를 걸어주고, (2) 루프를 확장변수의 전체 숫자만큼 돌리는 동안 짝수 번째에는 테이블 행을 바꿔주며, (3) 만약, 마지막 횟수가 홀수 번째여서 자리가 애매해질 땐 빈 셀들을 집어넣어서 모양새를 맞추는 게 포인트가 되겠네요.

그러면 테이블 한 줄에 확장 변수가 2개씩 들어가게 될 겁니다.

그리고, 입력칸의 넓이 조절은 board.css 파일에서...

.et_vars td{width:100%}

위의 '100%'를 적당한 넓이(예. 300px)로 바꿔주면 됩니다.

사용자 정의 이름(게시판 확장변수) 2개를 1줄 안에 넣기

간혹 확장변수를 이용자가 공란으로 남길 때가 있는데, 그럴 경우 앞의 댓글로 남겼던 소스에선 테이블 모양이 깨지거나 행별 배경 색상이 뒤틀리는 문제가 발견됐습니다. 그래서 정리도 할 겸, 기록으로도 남겨둘 겸, 최종 정리 글을 남겨봅니다;;;

_read.html 파일에서

0. 주의사항

: 확장변수가 두 군데에 출력됩니다. 옵션에 따라 '제목 아래'(Extra Var : Header 영역)나 '본문 안에'(Body 아래 Extra Var 영역)에 있습니다. 가급적이면 이 두 군데를 모두 바꿔주는 게 좋습니다.

:  바꿔줄 위치는 <table> 밑의 <caption class="blind">Extra Form</caption>에서부터, </table>위의 </tr>까지라고 보면 됩니다. 이하의 소스 역시 <caprion ~~ <tr>을 기준으로 합니다.

: 특정 변수만 2개씩 1줄로 처리하고자 하는 경우에는 해당 변수를 가급적 필수항목으로 처리해주시기 바랍니다. 기술적 한계로 인해 해당 변수가 공백이 되면 테이블 모양이 어그러질 수 있습니다. 하지만 모든 변수를 2개씩 1줄로 일괄 출력하고자 하는 경우(아래 3번 항목)에선 현재까지 확인된 문제는 없습니다.

: 그리고 스킨 폴더 아래에 있는 css 폴더에서 board.css를 찾은 후 다음의 코드에서 width:100%를 적당한 넓이값(예. 300px)으로 바꿔줍니다. 스케치북 게시판 스킨은 반응형이기 때문에 이렇게만 해줘도 모양이 반반씩 대칭적으로 나옵니다.

.et_vars td{width:100%}

0. 모든 경우에 공통되는 주요 변수 설명

: $etI - 입력된 값을 가진 확장변수의 총 개수를 카운팅하기 위한 임의의 변수입니다.

: $etIdx - (스케치북 게시판 스킨 순정 파일에 있던 것으로서) 테이블 행이 반복될 때마다 행의 배경 색상을 다르게 하기 위한 임의의 변수입니다.

: $key - 설정되어 있는 사용자 정의 이름(확장변수)의 일련번호에 대응하는 변수입니다.

1. 사용자 정의 이름 중에서 특정 변수 2개만 1줄로 넣고 싶은 경우 (예. 사용자 정의 목록에서 3번과 4번 변수일 때)

    <caption class="blind">Extra Form</caption>
    {@ $etI=0 }<block loop="$oDocument->getExtraVars() => $key,$val" cond="$val->getValueHTML()">{@ $etI++ }</block>
    {@ $etIdx=1 }
      <tr class="bg{$etIdx%2}">
      <block loop="$oDocument->getExtraVars() => $key,$val" cond="$val->getValueHTML() && $val->eid!='rd_preview'">
        <th scope="row">{$val->name}</th>
        <td colspan="3"|cond="$key<3 || $key>4" cond="$val->eid!='rating'">{$val->getValueHTML()}</td>
        <td colspan="3"|cond="$key<3 || $key>4" cond="$val->eid=='rating'" class="rating"><span class="starRating" title="{$val->getValueHTML()}{$lang->score}"><span style="width:{$val->getValueHTML()*10}%">{$val->getValueHTML()}</span></span></td>
        <!--@if($key!==3 && $etIdx!==$etI-1)-->
      </tr>
      {@ $etIdx++ }
      <tr class="bg{$etIdx%2}">
        <!--@end-->
      </block>
      </tr>

- {@ $etI=0 }<block loop="$oDocument->getExtraVars() => $key,$val" cond="$val->getValueHTML()">{@ $etI++ }</block> : 변수 값이 입력되어 있는 항목의 개수를 카운팅합니다.

- <tr class="bg{$etIdx%2}"> : 스케치북 게시판 스킨에서는 클래스값이 bg1이면 짙은 배경색을 출력해주고, bg0이면 배경색을 투명 처리합니다.

- td colspan="3"|cond="$key<3 || $key>4" : 3번과 4번 변수를 한 줄로 처리하기 때문에 그 외의 변수에 해당하는 경우는 한 줄로 처리가 됩니다.

- $key!==3 : 3번 변수 차례에서는 행을 바꾸지 않고 4번 변수는 <th scope="row">{$val->name}</th>에 해당하는 옆 칸에 출력합니다.

- $etIdx!==$etI-1 : 테이블에서 마지막 행인 게 확인이 되면, 새로운 행을 시작하지 않고 테이블 출력을 마감합니다.

2. 사용자 정의 이름 중에서 특정 변수 4개를 1줄로 넣고 싶은 경우 (예. 사용자 정의 목록에서 3~4번, 5~6번 변수일 때)

    <caption class="blind">Extra Form</caption>
    {@ $etI=0 }<block loop="$oDocument->getExtraVars() => $key,$val" cond="$val->getValueHTML()">{@ $etI++ }</block>
    {@ $etIdx=1 }
      <tr class="bg{$etIdx%2}">
      <block loop="$oDocument->getExtraVars() => $key,$val" cond="$val->getValueHTML() && $val->eid!='rd_preview'">
        <th scope="row">{$val->name}</th>
        <td colspan="3"|cond="$key<3 || $key>6" cond="$val->eid!='rating'">{$val->getValueHTML()}</td>
        <td colspan="3"|cond="$key<3 || $key>6" cond="$val->eid=='rating'" class="rating"><span class="starRating" title="{$val->getValueHTML()}{$lang->score}"><span style="width:{$val->getValueHTML()*10}%">{$val->getValueHTML()}</span></span></td>
        <!--@if($key!==3 && $key!==5 && $etIdx!==$etI-2)-->
      </tr>
      {@ $etIdx++ }
      <tr class="bg{$etIdx%2}">
        <!--@end-->
      </block>
      </tr>

- colspan="3"|cond="$key<3 || $key>6" : 3~6번 변수가 아닌 경우에는 한 줄로 처리합니다. 이것을 응용하여 조건절을 다른 방식으로 꾸밀 수 있습니다. 예. 2~3번과 6~7번을 한 줄로 처리한다면 $key!==2&&$key!==3&&$key!==6&&$key!==7

- $key!==3 && $key!==5 : 3번과 5번 변수가 아닌 경우에는 행을 바꿔줍니다. 이렇게 하면 4번과 6번 변수는 새로운 줄에서 시작하는 게 아니라 3번 변수 그리고 5번 변수와 각각 같은 줄로 배치됩니다. 변수 2개를 1줄로 처리할 때는 앞 칸에 오는 변수 번호를 이런 식으로 적어주면 됩니다.

- $etIdx!==$etI-2 : 테이블에서 마지막 행일 때 테이블 출력을 마감시켜주는 조건입니다. 여기서 빨간 숫자 2는 두 변수가 한 줄 처리된 경우가 두 개라는 의미이기도 합니다. 변수 6개를 3줄로 처리하는 경우라면 이 숫자를 3으로 바꿔주십시오.

3. 모든 사용자 정의 이름(확장변수)를 2개씩 1줄로 처리할 때

    <caption class="blind">Extra Form</caption>
    {@ $etI=0 }<block loop="$oDocument->getExtraVars() => $key,$val" cond="$val->getValueHTML()">{@ $etI++ }</block>
    {@ $etIdx=3 }
      <tr class="bg{($etIdx/2)%2}">
      <block loop="$oDocument->getExtraVars() => $key,$val" cond="$val->getValueHTML() && $val->eid!='rd_preview'">
        <th scope="row">{$val->name}</th>
        <td cond="$val->eid!='rating'">{$val->getValueHTML()}</td>
        <td cond="$val->eid=='rating'" class="rating"><span class="starRating" title="{$val->getValueHTML()}{$lang->score}"><span style="width:{$val->getValueHTML()*10}%">{$val->getValueHTML()}</span></span></td>
        <!--@if($etIdx!==$etI+2 && $etIdx%2==0)-->
      </tr>
      <tr class="bg{($etIdx/2)%2}">
        <!--@end-->
        <!--@if($etIdx==$etI+2 && $etIdx%2==1)-->
      <th scope="row"></th>
      <td></td>
        <!--@end-->
      {@ $etIdx++ }
      </block>
      </tr>

- $etIdx=3 : 한 행에 변수 두 개씩 들어가므로, 각 행의 배경색을 홀수와 짝수 순번에 따라 다르게 하기 위해선 처음 시작번호를 3으로 합니다.

- <tr class="bg{($etIdx/2)%2}"> : 3으로 시작해서 1씩 증가하는 카운팅 숫자를 2로 나눠준 후에 홀수(1)와 짝수(0)를 구분해서 행별로 배경색을 다르게 출력해줍니다.

- if($etIdx!==$etI+2 && $etIdx%2==0) : $etIdx!==$etI+2는 루프 중인 변수($oDocument->getExtraVars() => $key,$val)가 마지막 차례가 아님을 확인합니다. 그리고, 짝수 번째 변수 차례일 경우($etIdx%2==0)엔 행을 바꿔줍니다.

- if($etIdx==$etI+2 && $etIdx%2==1) : 루프가 마지막 차례($etIdx==$etI+2)이고, 그 때 변수가 홀수 번째라면 테이블에서 마지막 두 칸이 선이 없는 채로 출력이 되어 전체적인 모양이 어그러지게 됩니다(짝수 번째라면 상관이 없겠지요). 따라서 이 경우 <th scope="row"></th><td></td>를 입력해서 테이블 모양을 완벽하게 해줍니다.

- 이상입니다. 완벽한 코딩은 아니겠지만, 그래도 유용하게 쓰실 분들이 있을 것 같습니다. 그럼, 이만 줄이겠습니다.

- 마지막으로 주의사항 하나 더. 별점 기능은 어떻게 처리할지 몰라서 그냥 일괄처리로 했습니다. 제대로 적용될지는 확신이 없습니다;;;