* 모델-템플릿-스킨 구조 이해하기
망보드WP는 새로운 기술을 보다 쉽게 적용하면서 확장성을 높이기 위해
"모델-템플릿-스킨" 형태의 구조를 사용하여 개발이 진행 되었습니다
모델을 통해 게시판을 보다 쉽게 수정 및 관리할 수 있으면서 다양한 디바이스 환경에 대응할 수 있고,
템플릿을 작은 컴포넌트 형태로 세분화해서 확장성을 높이면서 새로운 기술을 쉽게 추가할 수 있도록 하였습니다
스킨의 역할은 "디자인" 영역으로 최소화해서 게시판 버젼업시 발생하는 호환성 문제를 줄일 수 있도록 하였습니다
모델
– 모델은 게시판의 설계를 담당하는 역할을 하며 JSON 구조로 구성되어 있습니다
– 게시판 기본 모델(skin-model) 파일은 “mangboard/skins/스킨이름/includes/skin-model.php” 입니다
– 아래의 코드는 글작성시에 작성자 이름에 대한 설정을 정의한 모델 코드 샘플입니다
{"field":"fn_user_name","name":"작성자","type":"text","width":"150px","maxlength":"20","required":"(*)","class":"user_name"},
템플릿
– 모델에서 정의한 타입에 맞는 템플릿 코드를 찾아 HTML 태그로 전환해 주는 역할을 합니다 ("type":"text")
– 템플릿 폴더 (mangboard/templates)를 보시면 mtpl로 시작하는 모델 템플릿과 tpl로 시작하는 일반 템플릿 파일을 보실 수 있습니다
– 게시판을 담당하는 "tpl.board.php", 관리자를 담당하는 "mtpl.admin.php", INPUT 태그를 담당하는 "mtpl.input.php" 파일 3개가 핵심 템플릿 파일입니다
if($type=='text'){
$template_start = '<input'.$data[“ext”].__STYLE(“width:”.$data[“width”].”;”.$data[“style”]).’ name=”‘.$data[“item_name”].'” id=”‘.$data[“item_id”].'” value=”‘.htmlspecialchars($data[“value”]).'" type="text"'.$add_attribute.' />';
}else if($type=='textarea'){
…
}
스킨
– 템플릿에서 넘겨 받은 HTML 태그에 CSS를 적용하여 사용자에게 보여주는 역할을 합니다
<tr id="mb_bbbb_tr_user_name"><th scope="row"><label for="mb_bbbb_i_user_name">작성자(*)</label></th><td><input class="user_name" style="width:150px;" name="user_name" id="mb_bbbb_i_user_name" value="" type="text" maxlength="20"></td></tr>
* 글작성 모델 코드 샘플
– 아래 코드는 글작성 화면을 담당하는 모델 코드 샘플입니다
– 템플릿은 아래의 모델코드를 순서대로 해석하여 스킨에 HTML 코드를 넘겨줍니다
– 모델 코드의 순서를 바꾸면 화면에 보여지는 순서도 변경됩니다
$desktop_model[‘write’] = '
{"tpl":"tag","tag_name":"table","type":"start","name":"글쓰기","width":"20%,*","mobile_width":"80px,*","class":"table table-write"},
{"field":"fn_title","name":"제목","width":"100%","required":"(*)","class":"text-left","required_error":"MSG_FIELD_EMPTY_ERROR2"},
{"field":"fn_category1","name":"카테고리","width":"100px","type":"category1","class":"category"},
{"field":"fn_user_name","name":"작성자","width":"150px","modify":"text_static","maxlength":"20","display_check":"login:none","required":"(*)","class":"user_name"},
{"field":"fn_passwd","name":"비밀번호","width":"150px","display_check":"login:hide","maxlength":"16","type":"password","required":"(*)","class":"passwd"},
{"field":"fn_content","name":"내용","width":"100%","type":"content","class":"content","colspan":"2","td_class":"content-box","required_error":"MSG_FIELD_EMPTY_ERROR2"},
{"field":"fn_tag","name":"태그","width":"100px","class":"tag","description":"(태그를 입력하는 공간입니다)"},
{"field":"fn_file1","name":"파일1","width":"160px","type":"file","class":"file"},
{"field":"fn_file2","name":"파일2","width":"160px","type":"file","class":"file"},
{"type":"kcaptcha_img","name":"자동등록방지","width":"70px","height":"30px","class":"kcaptcha","level":{"sign":"<","grade":"1"},"modify":"none","description":"<br>(자동등록방지 숫자를 순서대로 입력해 주세요)"},
{"tpl":"tag","tag_name":"table","type":"end"}
';
