웹마스터 팁
사용자 정의를 활용하여 폼 형식으로 개발하는 무식한 방법(1)
2014.08.22 03:34
제 경우 XE 는 1.2 인가까지 쓰면서 이미지 슬라이더 등도 만들고 나름 노력했으나;
제로보드 4 가 여전히 더 편해서 다시는 안쓰기로 했었습니다.
그러다가 워드프레스로 옮겨탈까 하던 중에 제로보드 XE 가 버젼이 많이 업되어서 좋겠구나 하고 왔지요.
예약 게시판 하나 만들다가 뚜껑이 열려서 마구 헤맨 결과를 여기 적어 드립니다.
팁들로 하나씩 시리즈로 작성할게요.
참고로, 고수님들에게는 쓰레기 팁이고, 노가다로 그냥 자신의 스킨을 개조해서 쓰실 분들께는
간단하게 제작할 수 있는 팁입니다.
그러니, 고수분들은 가볍게 뒤로가기를 눌러주세요...
완전 초보분들도 따라하기 쉽게 쓸게요.
사용자 정의를 활용하여 폼 형식으로 개발하는 무식한 방법(1)
: 사용자 변수를 만든 XE가 초보 입장에서는 잘못이다.
우선 사용자 정의 변수를 만든 XE 가 이 뛰어난 기능을 엉망으로 쓰게 해둔 것에서 하나씩 보도록 하죠.
(XE 설치폴더)/modules/board/skins/해당스킨/write_form.html 파일에서 보게 되면,
<table cond="count($extra_keys)" class="et_vars exForm bd_tb">
<caption><strong><em>*</em></strong> <small>: {$lang->is_required}</small></caption>
<tr loop="$extra_keys=>$key,$val">
<th scope="row"><em cond="$val->is_required=='Y'">*</em> {$val->name}</th>
<td>
{$val->getFormHTML()}
</td>
</tr>
</table>
이런 부분이 있을 것입니다.
이 부분에 간단히 코드를 추가합니다.
<table cond="count($extra_keys)" class="et_vars exForm bd_tb">
<caption><strong><em>*</em></strong> <small>: {$lang->is_required}</small></caption>
<tr loop="$extra_keys=>$key,$val">
<th scope="row"><em cond="$val->is_required=='Y'">*</em> {$val->name}</th>
<td>{$val->getFormHTML()}<br><br>
module_srl : {$val->module_srl}, <br>
idx : {$val->idx}, <br>
name : {$val->name}, <br>
type : {$val->type}, <br>
default : {$val->default}, <br>
desc : {$val->desc}, <br>
is_required : {$val->is_required}, <br>
search : {$val->search}, <br>
value : {$val->value}, <br>
eid : {$val->eid}, <br>
total : {print_r($val)}
</td>
</tr>
</table>
이렇게 해주면 name 값을 처리하는 것이나 val 을 통해서 어떤 값들이 넘겨지게 되는 지를 확인 가능합니다.
그런데 여기에서 문제가 있죠.
<tr loop="$extra_keys=>$key,$val">
코드 상의 문제...라고 볼 수도 있습니다.
고수님들께서 보시기엔 아무 문제 없이 쉽게 해결하겠지만,
이렇게 되어 있어서 사용자 변수를 키값과 밸류값으로 그냥 뿌리는 형식으로 처리하면서,
{$val->getFormHTML()}
이 함수에 넣고 그냥 폼으로 출력되게 하는 아주 간단한 구현을 해놓은 것입니다.
레이아웃이나, 메뉴 등에서만해도 끌올 등이 되는 등 아주 편한데,
이 값으로 해놓다보니, 우리 초보들은 사용자 정의를 입맛에 맞게 쓸 수가 없습니다.
간단히 설명해드리자면 idx 값에 숫자가 증가하면서 그게 인덱스가 되는 무식한 방법이죠.
그냥 사용자 정의 변수 1~n 번까지 루프 돌아서 뿌려버려~
이게 전부인 거죠.
일단 초보 단계에서 이걸 해결하는 방법은 위의 코드를 아예 주석으로 처리하고,
처리하기 전에 html 을 소스 보기로 보면서 무식하게 부분별로 형식을 지정해주는 거죠.
그런데 이렇게 한다고 해도 문제가 발생합니다.
우선, 수정을 눌렀을 때에 값 전달이 표기가 안됩니다.
그 다음으로는 입력시의 모양과 출력시의 모양이 달라집니다 -_-;
뭐, 출력시의 모양이 더 중요한 곳인 지, 입력시의 모양이 더 중요한 곳인 지는 각자의 판단에 달려있겠죠.
그래서 우선 위에 설명한 것처럼 idx 로 사용자 정의 변수를 쓰는 방식을 개조해야 합니다.
(XE설치경로)/modules/board/board.view.php 파일에서,
/**
* use context::set to setup extra variables
**/
$oDocumentModel = getModel('document');
$extra_keys = $oDocumentModel->getExtraKeys($this->module_info->module_srl);
Context::set('extra_keys', $extra_keys);
이 부분을 찾아서 그 바로 아래에,
/**
* add extra variables to order(sorting) target
**/
if (is_array($extra_keys))
{
// extra_keys_map : extra_keys가 있을 때, 맵을 추가로 구성
$extra_keys_map = array();
foreach($extra_keys as $val)
{
$extra_keys_map[$val->eid] = $val; // 맵에 값 할당 by diaimm
$this->order_target[] = $val->eid;
}
Context::set('extra_keys_map', $extra_keys_map); //맵을 view 로 전달해주는 거죠
}
이런 식으로 코드를 추가해둡니다.
아, 이런 이제서야 발견했습니다;; 확장 컴포넌트에 코드 입력이 있네요;
아놔 -_-;
// apply xml_js_filter on header $oDocumentController = getController('document'); $oDocumentController->addXmlJsFilter($this->module_info->module_srl);
이 부분을 찾아서,
// if the document exists, then setup extra variabels on context if($oDocument->isExists() && !$savedDoc) { $extra_keys = $oDocument->getExtraVars(); Context::set('extra_keys', $extra_keys); // 아래 코드에서 extra_keys 값이 있을 때 추가로 맵을 구성 if (is_array($extra_keys)) { $extra_keys_map = array(); foreach($extra_keys as $val) { $extra_keys_map[$val->eid] = $val; } Context::set('extra_keys_map', $extra_keys_map); } //여기까지 }
그 밑에 이런 식으로 추가해주는 거죠.
이렇게 해주는 이유는 앞에서 말씀드린 것처럼 기본적으로 XE 에서는 사용자 정의 변수 자체를
아주 가볍게 보고 별 쓰잘데기 없지만 원하는 사람도 있으니까... 라는 정도로 코딩을 해둔 때문입니다.
(아, 이건 그냥 초보가 느끼는 심정 그대로 썼습니다 -0-)
그냥 보면 사용자 변수 이렇게 쓰이니까, 개발자 분들은 쉽게 사용하세요 정도로 안내해준 것인 듯 한데,
초보들에게는 때에 따라서 매우 필요한 기능이 제대로 활용하기 어려우니까 쪼끔 분노게이지 상승하는 거죠.
어쨌든, view 에서 index 를 쓰게 만들어서 idx 를 이용해서 변수를 순차로 매기는 것에서 순서를 무시하고도
값을 전달하고 받는 것에 문제가 없게끔 하는 첫 작업인 거죠.
그렇게 해주면 idx 가 아닌 사용자 정의 변수 이름 그대로 쓸 수 있습니다.
예를 들어서 사용자 변수 명을 testInput 라고 만들었다고 칩니다.
<table cond="count($extra_keys)" border="1" cellspacing="0" summary="Extra Form" class="extraVarsList" width=100%>
<caption><em>*</em> : {$lang->is_required}</caption>
<tr>
<th scope="row"><em>*</em> 테스트 입력</th>
<td> <input type="text" name="extra_vars1" value="" class="text" />
<p>여기가 설명 부분이 되겠죠</p>
</td>
</tr>
게시판에 글 쓰기를 하고 앞에서 말씀드린 부분을 주석처리하기 전에 보게 되면,
이런 식으로 소스코드를 볼 수 있을 것입니다.
따라서 주석 처리를 해주고 write_form.html 자체에 저 코드를 추가하면, 아무런 이상없이 쓰게 된다는 거죠.
저기서 보게 될 중요한 점은 어디에서 testInput 는 존재하지 않습니다.
즉, 변수명은 받기만하고 쓰잘데기없는 값처럼 둔갑하는 거죠.
extra_vars1 이라고 해서 여기 숫자만 중요합니다.
뭥미?
그렇다는 것은 사용자 변수를 20개 만들었는데...
아차! 하나 빼먹음... 하는 순간...
입력 순서를 원하는대로 받으려면,
끌 올도 못하는데 새로고침 무지 하면서 올리기 버튼 눌러야 합니다.
(맨 위로 올림도 없고 그냥 무식하게 계속 올려야 합니다)
아니 이미 존재하는 모듈상에 코드가 존재하잖아요, 끌어 올리기...
모듈로 따로 개발하고 코딩한 이유가 그런 거 섞어쓰기 편하려던 목적 같은데...
객체지향... 내가 메뉴에서 마우스로 끌어 올리고 내리고 하는 코드 몰라도 그렇게 되게끔...
더 열받는 것은 잘못 누르면 다시 내려가요 ㅠㅠ
게다가 여러가지 테스트를 해보면 전화번호나 기타 값을 해보면 html 코드에 보면 id=extra_var3-1055
이런 식으로 각 기본값들에 대해서 엄청난 숫자 번호까지 매기는데, 이 값도 전혀 쓸모 없습니다.
순차적으로 이것도 그냥 인덱스죠.
그러니 무식한 코딩을 쓴 후에는 변수값 하나 추가하는 순간 멘붕인거죠.
그래서 앞에 과정을 해둔 것입니다.
위의 코드를 수정해보면,
<input type="text" name="extra_vars1" placeholder="{$extra_keys_map['testInput']->name}" style="width:155px;" value="{$extra_keys_map['testInput']->value}" class="text" />
이렇게 바꿔주는 거죠.
이제 우리가 활용하게 되는 것은,
extra_vars숫자 (사용자 정의 에서 나오는 앞의 숫자값입니다) 와 사용자 변수명이 되었습니다.
간단히 설명드리겠습니다.
placeholder 값은 당연히 입력 칸에 살짝 흐리게,
비 로그인 상태에서 글쓰기 할 때에, 비밀번호 -> 이렇게 써서 입력 받잖아요? 그런 태그 속성입니다.
사용자 정의 이름 입력할 때에 Ex) extra_vars_1 이라는 것도 마찬가지로 구현되어 있죠.
실제로는 밑줄 없습니다. 밑줄빼기도 아니고... 이건 뭐;;;
아무튼,
{$extra_keys_map['testInput']->name} 이게 사용자 변수의 입력항목 이름이 되는 거죠.
그리고 이 부분이 중요합니다.
style="width:155px;"
이게 입력 칸의 너비 조절이 되는 거죠.
size 로는 안됩니다. 원래 형식이 들어 있는 Extravar.class.php 에서 고친다고 해도 저렇게 고쳐줘야 작동합니다.
이제 이렇게 해준 상태에서,
가장 중요한 부분이죠.
이것 때문에 이 긴 글을 읽고 있는데 말입니다;
value="{$extra_keys_map['testInput']->value}"
이렇게 해주면 값 전달이 되어서 수정시에도 제대로 되겠죠.
그리고 지금은 맵을 두가지로 쓰기 때문에 루프 돌 때에도 사용자 변수명으로 if 써서 foreach 등에 끼어들기가 쉽습니다.
변수명 자체를 활용할 수 있으니까요.
오늘은 여기까지 설명하구요,
다음에는 사용자 정의 변수 형식에 우리 입맛대로 쑤셔 넣는 방법을 배우겠습니다.
그걸 해줘야, 시간이든, 해외 국제 전화번호든...
우리 넣고 싶은 값을 다 넣을 수 있죠.
코딩같은 코딩은 이번만 조금 다루고, 다음부터는 일단 무조건 노가다입니다.
- [2016/08/10] 묻고답하기 사용자정의(확장변수)에 입력하는 설명에 태그를 적용할 수 없을까요? *1
- [2016/04/02] 묻고답하기 게시판 사용자정의 이미지 첨부 *1
- [2014/08/22] 웹마스터 팁 사용자 정의를 활용하여 폼 형식으로 개발하는 무식한 방법(2) *5
- [2014/04/07] 묻고답하기 한 메뉴의 레이아웃에서 사용자 정의항목을 변경하면 일괄변경됩니다 ㅠ *3
- [2014/04/02] 묻고답하기 위젯에서 변수명 출력 가능한가요? *4
댓글 6
-
똑디
2014.08.22 11:12
-
Reminisce
2014.08.22 15:56
하는 일이 사진이니까;;
돈 받고 찍는 사진은 잘 찍어야 기본이구요 ^^
돈 받고 연습하는 사람들이 같이 오픈해서 문제인 현실이에요 ㅋㅋㅋ
-
똑디
2014.08.22 17:58
아...사진업을 하시는거군요. ^^
저도 사진을 좋아해서...
한번씩 놀러 갈게요.
-
Reminisce
2014.08.22 22:14
ㅋㅋ 많이 알려주세요~ 웹은 정말 모르겠더라구요~ 식구들이 늘어서 이제 웹위주로 해야하는데;;
-
HSJI
2014.08.22 11:32
초보자인 저도 확장변수 때문에 많이 고민했습니다 ^^;
전 스킨만 수정해서 썼는데요.
루프를 돌때 if문으로 사용자 변수명으로 끼어들기(?) 하려면 $val->eid 로 쓰면 됩니다.
사용자 정의 변수 순서는 게시판 관리 > 사용자 정의 에서 조정 가능하구요
예를 들어 확장변수의 사용자 정의 이름이 'exv_1', 'exv_2'인 경우 exv_1의 입력 폼만 따로 디자인하려면 write_form.html 에서
<table cond="count($extra_keys)" class="et_vars exForm bd_tb"> <caption><strong><em>*</em></strong> <small>: {$lang->is_required}</small></caption> <tr loop="$extra_keys=>$key,$val"> <th scope="row"><em cond="$val->is_required=='Y'">*</em> {$val->name}</th> <td> <!--@if($val->eid == 'exv_1') --> <input type="text" name="extra_vars{$key}" placeholder="{$val->name}" value="{$val->getValueHTML()}" style="width:150px;" class="text" /> <!--@elseif($val->eid == 'exv_2') --> {$val->getFormHTML()} <!--@else --> {$val->getFormHTML()} <!--@end--> </td> </tr> </table>
근데 이렇게 하면 글 입력(write_form)할때나 출력(read)에서 나타나는 확장변수 순서가 항상 동일한게 단점이네요.^^;;;
"사용자 정의 변수 형식에 우리 입맛대로 쑤셔 넣는 방법" 이거 기대됩니다
-
Reminisce
2014.08.22 15:51
이렇게 하면 write_form 할 때에 말씀처럼 순서를 바꿔줄 수가 없으니까 저렇게 한 거구요,
확장변수 이름을 $val->eid 로 한다해도 결국 루프를 벗어날 수가 없더라구요 ㅋ
그래서 루프 자체를 벗어나기 위해서 복잡한 과정으로 했습니다 ㅠㅠ
정말 화가 나더군요 ㅋㅋㅋ 아직도 무식하게 코딩으로만 해결해야 하니까;
사진 잘찍으시네요...^^ 부럽..