* 망보드 모델링 개념 이해하기
1. 망보드에서 모델이란…
– 게시판의 설계를 담당하는 역할을 하며, 한개의 게시판은 반드시 한개의 모델과 연결됩니다
– 모델에 작성된 순서대로 한줄의 코드가 한개의 템플릿과 매칭되어 게시판 태그를 생성합니다
– 모델 폴더 : mangboard/models
2. 모델 파일
– 스킨과 모델을 별도로 관리해야 하는 번거로움을 최소화하기 위해 스킨마다 고유의 모델 파일을 가지고 있으며, 게시판 추가시 기본 모델로 설정됩니다
– 스킨 모델 파일 : mangboard/skins/스킨이름/includes/skin-model.php
– 모델 폴더(mangboard/models/)는 스킨 모델 파일 이외의 모델 파일들을 관리하는 폴더입니다
– 같은 스킨을 사용하는 서로 다른 게시판에 각각의 모델 파일을 설정하려면 스킨 모델 파일을 모델 폴더(mangboard/models)에 이름을 수정하여 복사한 후 게시판 설정(관리자>Mangboard>게시판 관리>설정 버튼 클릭) 화면에서 모델 이름을 복사한 모델 파일로 선택하시면 됩니다
– 기본적으로 제공하는 "form" 모델(mangboard/models/form.php)은 게시판을 입력폼 양식으로 사용할 수 있도록 해주는 모델입니다
(글작성 화면이 처음 나타나고, 글작성시 "등록되었습니다" 팝업창을 뛰우고 새로고침이 되도록 설정)
3. 모델은 게시판을 구성하는 각각의 화면을 정의할 수 있습니다
– 글목록 모델 : desktop_model[‘list’]
– 갤러리 모델 : desktop_model[‘list_gallery’]
– 캘린더 모델 : desktop_model[‘list_calendar’]
– 글보기 모델 : desktop_model[‘view’]
– 글작성 모델 : desktop_model[‘write’]
– 댓글 목록 모델 : desktop_model[‘comment_list’]
– 댓글 작성 모델 : desktop_model[‘comment_write’]
– 댓글 답변 모델 : desktop_model[‘comment_reply’]
4. 데스크탑, 태블릿, 모바일 디바이스에 대한 모델을 설정할 수 있습니다
– 데스크탑 모델 : desktop_model
– 태블릿 모델 : tablet_model
– 모바일 모델 : mobile_model
5. 데스크탑 모델을 정의한 후에 태블릿, 모바일 모델에 복사하고 다른 부분들만 수정해서 사용할 수 있습니다
$mobile_model = $desktop_model; // 데스크탑 모델을 모바일 모델에 복사
$mobile_model[‘list’] = '………'; // 모바일 글목록 모델을 수정
* 모델링 초급
1. 모델 기본 태그 이해하기
– 글목록 모델 샘플
$desktop_model[‘list’] = '
{"type":"list_check","width":"50px","level":"10","class":"list_check"},
{"field":"fn_pid","name":"번호","width":"50px","class":"num","type":"pid","class":"pid"},
{"field":"fn_title","name":"제목","width":"","type":"title_img","maxlength":"20","maxtext":"..","td_class":"text-left"},
{"field":"fn_user_name","name":"작성자","width":"115px","class":"user_name","type":"user_name"},
{"field":"fn_reg_date","name":"날짜","width":"85px","type":"date","class":"date"},
{"field":"fn_hit","name":"조회","width":"60px","class":"hit"}
';
– 위의 코드는 글목록 모델을 정의하는 코드로 중괄호{}로 둘려 쌓여진 코드가 순서대로 템플릿 태그를 생성하는 과정을 통해 글목록 화면을 구성하는 태그를 만들게 됩니다
2. 모델 기본 속성 이해하기
– field : 디비에 있는 테이블 필드와 매칭할 필드 이름을 입력합니다
– name : 화면에 표시할 이름을 입력합니다
– required : 필수 입력 항목에 대한 표시를 입력합니다 (ex: "required":"(*)")
– width : 넓이에 대한 속성값을 입력합니다
– height : 높이에 대한 속성값을 입력합니다
– img_width : 이미지 넓이에 대한 속성값을 입력합니다
– img_height : 이미지 높이에 대한 속성값을 입력합니다
– type : 템플릿과 매칭되는 템플릿 타입을 입력합니다 (type이 정의되어 있으면 템플릿에서 type에 맞는 템플릿을 찾아 태그를 생성하고, 정의되어 있지 않으면 기본 태그를 생성합니다)
(글작성 모델에서는 type 생략시 "text"로 자동 설정됩니다)
– maxlength : 화면에 보여줄 최대 글자수를 입력합니다 (글쓰기에서는 최대로 입력할 글자수)
– maxtext : 최대 글자수가 넘어가면 보여줄 텍스트를 입력합니다
– tr_class : tr 태그에 넣을 class 를 입력합니다
– th_class : th 태그에 넣을 class 를 입력합니다
– td_class : td 태그에 넣을 class 를 입력합니다
– class : 템플릿 태그에 넣을 class 를 입력합니다
– tr_style : tr 태그에 넣을 style 을 입력합니다
– th_style : th 태그에 넣을 style 을 입력합니다
– td_style : td 태그에 넣을 style 을 입력합니다
– style : 템플릿 태그에 넣을 style 을 입력합니다
– colspan : td 태그에 넣을 colspan 을 입력합니다
– description : 템플릿 태그에 대한 설명을 입력합니다
– data : input 태그(select,radio,checkbox)에서 value 속성에 들어갈 값을 쉽표로 구분해서 입력합니다 (ex: apple,banana,grape)
– label : input 태그(select,radio,checkbox)에서 표시되는 이름을 쉽표로 구분해서 입력합니다 (ex: 사과,바나나,포도)
– default : 글쓰기 입력 필드에 기본으로 보여질 값을 입력합니다
– title : title 속성값을 입력합니다
– placeholder : placeholder 속성값을 입력합니다
– tooltip : tooltip 속성값을 입력합니다 (ex: "tooltip":"text" or "tooltip":{"text":"abcd","img":"","class":""})
– write : 글작성 기능에서 변경해서 적용할 type을 입력합니다
– modify : 글수정 기능에서 변경해서 적용할 type을 입력합니다
– reply : 답변하기 기능에서 변경해서 적용할 type을 입력합니다
– login : 로그인 상태에서 변경해서 적용할 type을 입력합니다
– display : hide(감추기), none(표시안함)
3. Level 속성 이해하기
회원 레벨에 따라 템플릿이 보여지도록 설정할 수 있습니다
– "level":"10" => 레벨이 10보다 크거나 같은 회원에게만 보임
– "level":{"sign":"<=","num":"2"} => 레벨이 2보다 작거나 같은 회원에게만 보임
4. Event 속성 이해하기
"onclick" 이벤트에 대한 속성만 기본적으로 지원하며, 기타 이벤트 처리는 "event" 속성을 통해 직접 입력해서 사용할 수 있습니다
– onclick : click 이벤트 발생시 처리할 함수를 입력합니다 (ex: "onclick":"openContents(this)")
– event : event 함수를 직접 입력합니다 (ex: "event":"onkeydown=\"return inputOnlyNumber(event)\"")
5. 기타 속성
– 글목록 화면에서 검색 SELECT 태그에 안나타나게 하는 설정 : "search":"false"
– 글목록 상단 헤더 클릭시 정렬이 안되도록 하는 설정 : "order":"false"
– 로그인시에 표시 안하는 설정 : "display_check":"login:none"
– 비로그인시에 표시 안하는 설정 : "display_check":"not_login:none"
– 글보기 모드에서 값이 없을 경우 표시 안하는 설정 : "display_check":"empty:none"
* 모델링 중급
1. 특정 단어 입력 못하도록 Filter 속성
– 모델 파일에 mbw_set_filter("필터 이름", "금지어") 함수를 이용하여 금지어를 등록한다
ex) mbw_set_filter("filter_swear","18아,18놈,18새끼,18년,18뇬");
– filter : 적용할 필터 이름을 입력한다
– filter_error : 출력할 에러 메시지를 입력한다
ex) {"field":"fn_title","name":"제목","width":"100px","type":"title","required":"(*)","filter":"filter_swear","filter_error":"금지어가 포함되어 있습니다"}
2. 정상적인 입력인지 체크하는 Pattern 속성
– 모델 파일에 mbw_set_pattern("패턴 이름", "패턴") 함수를 이용하여 패턴을 등록한다
ex) mbw_set_pattern("email","/^[^@.]{4,}@[0-9a-z-.]{3,}$/");
– pattern : 적용할 패턴 이름을 입력한다
– pattern_error : 출력할 에러 메시지를 입력한다
ex) {"field":"fn_email","name":"이메일","width":"100px","type":"text","required":"(*)","pattern":"email","pattern_error":"정상적인 이메일 주소가 아닙니다"}
3. 입력한 값의 중복 여부를 체크하는 Unique 속성
– Unique 속성은 "required":"(*)" 가 설정된 항목에만 적용됩니다
– unique : "true" 를 입력한다
– unique_error : 출력할 에러 메시지를 입력한다
ex) {"field":"fn_user_name","name":"이름","width":"100px","type":"title","required":"(*)","unique":"true","unique_error":"이미 존재하는 이름입니다<br>다른 이름을 입력해 주세요"}
4. 2개의 템플릿을 연동해서 사용하는 Combo 속성
– match_value : 부모 템플릿에서 선택한 값과 동일할 경우 Combo 템플릿 태그를 보여주거나 감출 수 있다
– match_type : show(지정한 값을 선택했을 경우 Combo 템플릿 태그를 보여준다), hide(지정한 값을 선택했을 경우 Combo 템플릿 태그를 감춘다)
ex) Select 박스에서 사과 또는 바나나 를선택할 경우 넓이가 300px인 텍스트 박스를 보여주는 예
{"field":"fn_ext1","name":"테스트","width":"80px","type":"select","data":"apple,banana,grape","label":"사과,바나나,포도","combo":{"field":"fn_ext2","type":"text","width":"300px","match_type":"show","match_value":"apple,banana"}},
* 반응형 모델링
1. 모바일, 태블릿 디바이스 속성값 설정하기
– width 속성값 앞에 "mobile_","tablet_" 접두사를 붙이면 모바일, 태블릿에서만 동작하는 속성을 설정할 수 있습니다
ex) "width":"50px","tablet_width":"40px","mobile_width":"30px" (데스크탑 50px, 태블릿 40px, 모바일 30px 의 넓이로 보여집니다)
– 디바이스 설정이 가능한 속성
"type","width","height","img_width","img_height","maxlength","name","label","data","class","th_class","td_class","style","th_style","td_style","parent","display","event","title","description"
2. 반응형 속성 이해하기
– responsive : 글목록 테이블 태그에 반응형을 지원하기 위한 속성으로 모바일에서 안보이는 속성(mb-hide-mobile), 태블릿에서 안보이는 속성(mb-hide-tablet)을 설정할 수 있습니다
– reponsive 속성은 브라우져 크기(1200px 이상: 데스크탑-large, 992px 이상: 데스크탑, 768 ~ 992px: 태블릿, 768px 이하: 모바일)에 따라 속성이 적용됩니다
ex1) "responsive":"mb-hide-mobile mb-hide-tablet" (브라우져 넓이가 992px 이하에서 안보이도록 설정)
ex2) "responsive":"mb-hide-mobile" (브라우져 넓이가 768px 이하에서 안보이도록 설정)
ex3) "responsive":"mb-hide-tablet" (브라우져 넓이가 768 ~ 992px 에서 안보이도록 설정)
ex4) "responsive":"mb-show-desktop-large" (브라우져 넓이가 1200px 이상에서만 보이도록 설정)
3. 반응형웹 구축을 위한 모델 설정 방법
1) 세밀한 반응형웹을 설정하는 방법
– 각각의 디바이스에 맞는 모델을 상세하게 설정 : desktop_model, tablet_model, mobile_model
2) 넓이만 다르게 해서 보여주는 방법
– 디바이스 속성을 사용 : "width":"50px","tablet_width":"40px","mobile_width":"30px"
3) 브라우져 넓이에 따라 중요하지 않는 부분을 안보이도록 하는 방법 (글목록 화면에서만 적용됨)
– responsive 속성 사용 : "responsive":"mb-hide-mobile mb-hide-tablet"
* TPL 속성을 이용한 확장 기능
1. HTML 태그 구조 만들기 ("tpl":"tag")
– type : start(태그 시작), end(태그 종료), start-end(태그 시작-종료), end-start(태그 종료-시작)
ex) {"tpl":"tag","tag_name":"div","type":"start","name":"이름","class":"","style":"width:100%;"},
{"field":"fn_image_path","name":"이미지","width":"100%","height":"100%","type":"img","class":"img"},
{"tpl":"tag","tag_name":"div","type":"end"},
2. HTML 태그 직접 입력하기 ("tpl":"html")
ex) {"tpl":"html","code":"<h2>제목</h2>"},
3. 외부 파일 불러오기 ("tpl":"include_file")
– path : 파일의 경로를 입력하는 속성으로 "mangboard" 폴더 내부의 경로를 입력한다 (생략시 스킨의 경로가 디폴트로 설정)
– file_name : 불러올 파일 이름을 입력한다
ex) {"tpl":"include_file","path":"plugins/","file_name":"파일 이름"},
4. Filter 함수 실행하기 ("tpl":"filter")
– filter_name : 실행할 Filter 함수 이름을 입력한다
ex) {"tpl":"filter","filter_name":"필터 이름"},
5. Action 함수 실행하기 ("tpl":"action")
– action_name : 실행할 Action 함수 이름을 입력한다
ex) {"tpl":"action","action_name":"필터 이름"},
