질문/조언질답게시판

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

images.png

 

보통 저렇게 사용자 정의가 한줄 한줄씩 출력이 되는데

출력할때 900dd8a2e7a7a0ec930b868c3214e835.gif

 

저렇게 두개로 나누거나 특정 사용자 정의 이름만 두개로 행을 나눌수있을까요??

 

스케치북5게시판 스킨을 사용하고 있습니다. 

 

  • profile

    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>
    <[email protected]($key!==count($extra_keys) && $key%2==0)-->
    </tr>
    <tr>
    <[email protected]>
    <[email protected]($key==count($extra_keys) && $key%2!==0)-->
    <th scope="row"></th>
    <td></td>
    <[email protected]>
    </block>
    </tr>

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

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

     

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

    .et_vars td{width:100%}

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

  • profile ?
    아앗!! 감사합니다. ㅠㅠ
  • profile ?
    하나만 더 여쭤봐도 될까요?? 다른것들은 그대로 한줄로 되어있고
    특정 사용자 정의 이름을 넣었을때 그것만 두개로 할수도 있을까요?? 그건 어렵겠죠?
  • ? profile
    두 가지 방식이 가능할 것 같은데요.
    1. 첫 번째는 위의 소스를 활용할 경우, 한 줄에 두 개로 들어갈 '사용자 정의 이름'의 '번호'가 몇 번인지를 확인해야 합니다. 그리고 그 두 '번호'는 가급적 (1)서로 연속되어야 하고 (2)그 중 첫 번째 '사용자 정의 이름'은 홀수 '번호'로 시작하는 게 좋습니다.
    2. 두 번째는 '사용자 정의 이름'이나 '입력항목 이름'을 (가급적 변경하지 않는다는 전제 하에서 이를) 활용해 커스터마이징하는 방법이 있지 않을까 합니다. 상대적으로 이 경우엔 목록 상에서 '사용자 정의 이름'의 순서는 중요하지 않을 것 같네요.
  • profile ?
    감사합니다. 초보인 저는 곱씹어 읽어봐야할듯.. ㅎㅎ 아 막힌 가슴이 뻥뚫리는거 같아서 좋네요.. 감사합니다.
  • ? profile

    만약, 4번과 5번의 '사용자 정의 이름'만 한 줄로 넣고 싶다면 다음과 같이 코딩하면 됩니다.

     

        <tr>
        <block loop="$extra_keys=>$key,$val">
          <th scope="row"><em cond="$val->is_required=='Y'">*</em> {$val->name}</th>
          <td colspan="3"|cond="$key!==4&&$key!==5">{$val->getFormHTML()}</td>
          <[email protected]($key!==4)-->
        </tr>
        <tr>
          <[email protected]>
        </block>
        </tr>

     

    빨간색 글자가 바로 그 4번과 5번입니다.

    (아까 댓글에서 가급적 홀수 번호로 시작하는 게 좋다고 했는데, 막상해보니 별 상관은 없네요ㅎㅎ)

     

  • profile ?
    아아악!! 감사합니다!!! ㅠㅠ
  • ? profile

    위에서
    <[email protected]($key!==4)-->
    이것 말고
    <[email protected]($key!==4&&$key!==count($extra_keys))-->
    이걸로 붙여넣는 게 코드가 더 깔끔하게 떨어지네요;;

  • profile ?

    윤삼님 혹시 _read.html(스케치북5)에서도 똑같이 나오게 할려면 어떻게 해야 하나요? 비슷하게 수정하면 되겠지 했는데 구조가 너무 다르네요 ㅠㅠ

  • ? profile

    입력창뿐 아니라 출력 부분에서도 코딩을 해줘야겠군요! ;;;;

     

    1. 확장변수 전체를 두 개씩 한 줄로 처리할 때

        <!--// Extra Var -->
        <table cond="!$mi->et_var && $oDocument->isExtraVarsExists() && (!$oDocument->isSecret() || $oDocument->isGranted())" class="et_vars bd_tb">
        <caption class="blind">Extra Form</caption>
        {@ $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 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>
            <[email protected]($key!==count($oDocument->getExtraVars()) && $key%2==0)-->
          </tr>
          {@ $etIdx++ }
          <tr class="bg{$etIdx%2}">
            <[email protected]>
          </block>
          </tr>
        </table>

     

    2. 특정 확장변수 두 개만 한 줄로 처리할 때(예. 사용자 정의 이름 목록에서 4번과 5번의 변수를 한 줄로 만들 때)

        <!--// Extra Var -->
        <table cond="!$mi->et_var && $oDocument->isExtraVarsExists() && (!$oDocument->isSecret() || $oDocument->isGranted())" class="et_vars bd_tb">
        <caption class="blind">Extra Form</caption>
        {@ $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!==4&&$key!==5" cond="$val->eid!='rating'">{$val->getValueHTML()}</td>
            <td colspan="3"|cond="$key!==4&&$key!==5" 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>
            <[email protected]($key!==4&&$key!==count($oDocument->getExtraVars()))-->
          </tr>
          {@ $etIdx++ }
          <tr class="bg{$etIdx%2}">
            <[email protected]>
          </block>
          </tr>
        </table>

    위 코드 중 총 5군데에 있는 ... $key!==4와 $key!==5 ...에서 빨간색 숫자에 유의하시면 됩니다.

  • profile ?
    <!--// Extra Var : Header -->
    <table cond="$mi->et_var=='2' && $oDocument->isExtraVarsExists() && (!$oDocument->isSecret() || $oDocument->isGranted())" class="et_vars bd_tb">
    <caption class="blind">Extra Form</caption>
    {@ $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 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>
    <[email protected]($key!==count($oDocument->getExtraVars()) && $key%2==0)-->
      </tr>
      {@ $etIdx++ }
      <tr class="bg{$etIdx%2}">
    <[email protected]>
      </block>
      </tr>
    </table>

     

    답변 감사합니다. 알려주신 대로 했는데 계속 안되길래 보니까 header부분에도 넣어줘야 되더라고요.

    또 그대로 넣으면 안되고 4번줄 부터 넣어야 되던데 이렇게 하는게 맞는 걸까요?  문서 여러개를 봐도 잘 나오긴 합니다만...

     

     

     

     

     

  • ? profile

    네, 맞아요. 확장변수 출력을 '본문 안에(Body 아래 Extra Var 영역)' 할 거냐 '제목 아래'(Extra Var : Header 영역)에 할 거냐는 옵션이 있는데, 제가 Header 부분을 놓쳤었네요. 아스님 말씀대로 고치시면 됩니다.
    Header에서 cond="$mi->et_var=='2' 이 부분은 스케치북 스킨에서 게시판 설정과 관련된 부분이니 당연히 그대로 둬야겠죠.
    (그리고 한 가지 적시 안 한 문제가 있는데, 그건 좀 더 연구해보고 다시 댓글 달도록 할게요!)

  • profile ?
    아니에요ㅎ 이정도만 해도 만족합니다. 문제만 없으면 이대로 쓸께요. 신경써 주셔서 감사합니다.
  • profile

    사용자 정의 이름(게시판 확장변수) 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>
            <[email protected]($key!==3 && $etIdx!==$etI-1)-->
          </tr>
          {@ $etIdx++ }
          <tr class="bg{$etIdx%2}">
            <[email protected]>
          </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>
            <[email protected]($key!==3 && $key!==5 && $etIdx!==$etI-2)-->
          </tr>
          {@ $etIdx++ }
          <tr class="bg{$etIdx%2}">
            <[email protected]>
          </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>
            <[email protected]($etIdx!==$etI+2 && $etIdx%2==0)-->
          </tr>
          <tr class="bg{($etIdx/2)%2}">
            <[email protected]>
            <[email protected]($etIdx==$etI+2 && $etIdx%2==1)-->
          <th scope="row"></th>
          <td></td>
            <[email protected]>
          {@ $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>를 입력해서 테이블 모양을 완벽하게 해줍니다.

     

     

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

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


서버에 요청 중입니다. 잠시만 기다려 주십시오...