모델링 개념 이해하기

1. 망보드에서 모델이란…
  – 게시판의 설계를 담당하는 역할을 하며, 한개의 게시판은 반드시 한개의 모델과 연결됩니다
  – 모델에 작성된 순서대로 한줄의 코드가 한개의 템플릿과 매칭되어 게시판 태그를 생성합니다
  – 모델 폴더 : /wp-content/plugins/mangboard/models
  – 모델링 쉽게 이해하기 : https://www.mangboard.com/tip/?vid=4
  – 모델링 샘플 코드 : https://www.mangboard.com/tip/?vid=3
  – 게시판 기능 모델링 : https://www.mangboard.com/tip/?vid=6
  – 게시판 댓글 기능 모델링 : https://www.mangboard.com/tip/?vid=7
  – 회원기능 모델링 : https://www.mangboard.com/tip/?vid=8


2. 모델 파일
  – 스킨과 모델을 별도로 관리해야 하는 번거로움을 최소화하기 위해 스킨마다 고유의 모델 파일을 가지고 있으며,
    게시판 추가시 기본 모델로 설정됩니다
  – 스킨 모델 파일 : /wp-content/plugins/mangboard/skins/스킨이름/includes/skin-model.php
  – 모델 폴더(/wp-content/plugins/mangboard/models)는 스킨 모델 파일 이외의 모델 파일들을 관리하는 폴더입니다
  – 서로 다른 스킨을 사용하는 2개 이상의 게시판에 같은 기능의 모델 파일을 설정하려면 스킨 모델 파일을 
   모델 폴더(/wp-content/plugins/mangboard/models)에 복사한 후 게시판 설정(관리자>Mangboard>게시판 관리>설정 버튼 클릭)
   화면에서 모델 이름을 복사한 모델 파일로 설정하신후 수정해서 사용하시면 됩니다
  – 기본적으로 제공하는 "form" 모델(/wp-content/plugins/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'] = '………'; // 모바일 글목록 모델을 수정

6. 모델 파일 경로
  – 관리자 모델 파일 경로 : /wp-content/plugins/mangboard/models/admin/
   (게시판관리, 회원관리, 옵션설정, 파일관리, 통계관리 등)
  – 회원 모델 파일 경로 : /wp-content/plugins/mangboard/models/user/
   (회원가입, 회원정보 수정, 비밀번호 찾기 등)
  – 커머스 모델 파일 경로 : /wp-content/plugins/mangboard/models/commerce/
   (상품등록, 강의등록, 장바구니, 포인트, 주문/결제내역 등)

7. 모델링 동영상 강의
  – 리스트 화면 모델링 설정방법 : https://www.mangboard.com/video/?vid=5
  – 글쓰기 화면 모델링 설정방법 : https://www.mangboard.com/video/?vid=6
  – 모델링 샘플코드 이용방법 : https://www.mangboard.com/video/?vid=7

모델링 초급

1. 모델 기본 태그 이해하기
  [ 글목록 모델 샘플 ]
$desktop_model['list']      = '
{"type":"list_check","width":"50px","level":"10","class":"list_check"},
{"field":"fn_pid","name":"번호","width":"50px","class":"num","type":"pid"},
{"field":"fn_title","name":"제목","width":"","type":"title","maxlength":"40","maxtext":".."},
{"field":"fn_user_name","name":"작성자","width":"115px","class":"user_name"},
{"field":"fn_content","name":"내용","type":"search"},
{"field":"fn_reg_date","name":"날짜","width":"90px","type":"date","class":"date"},
{"field":"fn_hit","name":"조회","width":"60px","class":"hit"}
';
 – 중괄호{}로 둘려 쌓여진 모델 코드가 순서대로 템플릿을 통해 HTML 태그를 생성하게 됩니다
 – 모델 코드의 순서를 바꾸면 화면에 보여지는 순서가 변경되며, 삭제하시면 해당 내용이 삭제됩니다
 – 추가로 필요한 항목도 모델 코드만 추가하시면 내용이 추가됩니다

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 속성값을 입력합니다
– attribute : attribute 속성값을 입력합니다 (ex: "attribute":" readonly")
– tooltip : tooltip 속성값을 입력합니다 (ex: "tooltip":"text" or "tooltip":{"text":"abcd","img":"","class":""})
– write : 글작성 기능에서 변경해서 적용할 type을 입력합니다
– modify : 글수정 기능에서 변경해서 적용할 type을 입력합니다
– reply : 답변하기 기능에서 변경해서 적용할 type을 입력합니다
– login : 로그인 상태에서 변경해서 적용할 type을 입력합니다
– display : hide(감추기), none(표시안함)
– add_start_html : 템플릿 태그 앞에 HTML 태그를 추가합니다
– add_middle_html : 템플릿 태그 중간(description 앞)에 HTML 태그를 추가합니다
– add_end_html : 템플릿 태그 뒤(description 뒤)에 HTML 태그를 추가합니다
– add_name : 이름 뒤에 텍스트를 추가합니다 (망보드 1.6.4 이상)
– substr : 입력된 문자열의 특정 위치를 잘라서 보여줍니다 (망보드 1.6.5 이상)
        (ex: "substr":"10"   처음부터 10번째 문자까지 잘라냅니다)
        (ex: "substr":"3,10"   3번째 문자부터 10번째 문자까지 잘라냅니다)
– prepend_text : 입력된 값의 앞부분에 텍스트를 추가합니다 (망보드 1.6.5 이상)
– append_text : 입력된 값의 뒷부분에 텍스트를 추가합니다 (망보드 1.6.5 이상)


3. Level 속성 이해하기
회원 레벨에 따라 템플릿이 보여지도록 설정할 수 있습니다
– "level":"10"  레벨이 10보다 크거나 같은 회원에게만 보임
– "level":{"sign":"<=","grade":"2"}   레벨이 2보다 작거나 같은 회원에게만 보임
– "level":{"sign":">=","grade":"2"}   레벨이 2보다 크거나 같은 회원에게만 보임

4. Event 속성 이해하기
"onclick" 이벤트에 대한 속성만 기본적으로 지원하며, 기타 이벤트 처리는 "event" 속성을 통해 직접 입력해서 사용할 수 있습니다
– onclick : click 이벤트 발생시 처리할 함수를 입력합니다 (ex: "onclick":"openContents(this,\'\',1)")
– 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개의 템플릿을 연결해서 사용하는 Join 속성 : 일부 속성 지원안함 (required,add_name)
– 1개 템플릿 연결
{"field":"fn_ext1","name":"테스트","width":"80px","type":"select","data":"apple,banana,grape","label":"사과,바나나,포도","join":{"field":"fn_ext2","type":"text","width":"300px"}},

– 2개 이상의 템플릿 연결
{"field":"fn_ext1","name":"테스트","width":"80px","type":"select","data":"apple,banana,grape","label":"사과,바나나,포도","join":[{"field":"fn_ext2","type":"text","width":"100px"},{"field":"fn_ext3","type":"text","width":"100px"}]},

5. 2개의 템플릿을 조건으로 연결해서 사용하는 Combo 속성 : 일부 속성 지원안함 (required,add_name)
– match_value : 부모 템플릿에서 선택한 값과 동일할 경우 Combo 템플릿 태그를 보여주거나 감출 수 있다
– match_type : show(지정한 값을 선택했을 경우 Combo 템플릿 태그를 보여준다), 
                 hide(지정한 값을 선택했을 경우 Combo 템플릿 태그를 감춘다)
  ex) Select 박스에서 사과 또는 바나나 를선택할 경우 넓이가 300px인 텍스트 박스를 보여주는 예

– 1개 템플릿 연결 (match_value 속성에 여러개의 값을 입력 가능)
{"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"}},

– 2개 이상의 템플릿 연결 (match_value 속성에 한개의 값만 입력 가능)
{"field":"fn_ext1","name":"주문 옵션","width":"60px","type":"radio","data":"0,1,2","label":"사용안함,일반,재고","default":"0","combo":[{"type":"text","match_value":"1","field":"fn_ext2"},{"type":"textarea","match_value":"2","field":"fn_ext3"}]},

반응형 모델링

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 이상: desktop-large, 992px 이상: desktop, 768 ~ 992px: tablet, 768px 이하: mobile)에 따라 속성이 적용됩니다
  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. 스킨 내부 파일 불러오기 ("tpl":"include_file")
  – skin_name: 스킨 경로를 설정하는 속성으로 "mangboard/skins" 폴더 내부의 스킨 이름 입력
  – file_name: 불러올 파일 이름 입력
  ex) {"tpl":"include_file","skin_name":"bbs_basic","file_name":"user-terms-service.php"},