https://www.mangboard.com/manual/start/
매뉴얼 | 워드프레스 게시판 망보드
망보드 소개, 버젼별 특징, 설치방법, 게시판 추가방법
www.mangboard.com
■ 망보드 소개
망보드는 웹에서 모바일앱까지 한번에 제작할 수 있도록 개발되어 필요에 따라 회원관리(비즈니스 패키지), 쇼핑몰(커머스 패키지), 모바일앱(모바일 패키지) 등의 기능을 추가해서 사용할 수 있고, 모든 기능이 하나의 플러그인으로 통합되어 빠른 속도로 동작합니다.
워드프레스에서 최적화되지 않은 무료 플러그인들을 이것저것 사용하다보면 속도가 금방 느려지는 것을 느끼실 수 있는데 망보드는 하나의 플러그인으로 모든 기능들을 최적화해서 제공하고 있습니다.
■ 왜, 망보드를 선택해야 할까요?
다양한 플러그인을 쉽게 설치해서 사용할 수 있다는 점은 워드프레스의 큰 장점이기도 하지만 서로 다른 개발사에서 개발한 플러그인을 많이 사용할 수록 업데이트시에 플러그인 충돌 및 호환성 문제가 발생할 확률이 높아지기 때문에 홈페이지 운영이 어려워지는 문제가 발생할 수 있습니다.
홈페이지를 개발하는 과정에서는 방문자가 없기 때문에 업데이트 진행중 오류가 발생하면 시간을 갖고 해결할 수 있지만 홈페이지를 운영하는 도중이라면 오류가 발생할지도 모르는 위험을 가지고 업데이트를 진행하기가 쉽지 않습니다. 그렇다고 업데이트 충돌 문제 때문에 주기적으로 업데이트를 진행하지 않을 경우 다양한 보안 위협에 노출될 수 있습니다.
망보드는 이러한 문제를 해결하기 위해 대부분의 기능들을 자체적인 모듈형태로 개발하여 사용하고 있습니다. 게시판,회원관리,쇼핑몰 등 다양한 기능들을 모듈형태로 개발하여 하나의 플러그인 형태로 통합해서 제공하기 때문에 충돌문제 없이 안심하고 업데이트를 진행하실 수 있으며, 필요한 기능들은 언제든지 쉽게 추가해서 사용이 가능합니다.
그리고 매년 실시되는 엄격한 보안 검증 과정을 통과하여 워드프레스 공식 플러그인으로 등록되어 있으며, 국내에서 가장 많은 사용자를 보유한 공식 플러그인이라 믿고 사용하실 수 있습니다.
망보드 플러그인: https://wordpress.org/plugins/mangboard/advanced/
■ 망보드의 장점
. 반응형웹에 가장 최적화된 기능 제공
- 브라우져 화면크기에 대한 1차 반응형 지원
- 데스크탑,테블릿,모바일 디바이스 환경에 대한 2차 반응형 지원
2. 홈페이지 관리에 필요한 다양한 관리자 기능을 무료로 제공
3. 자료실, 갤러리, 캘린더, 웹진, 폼, 자주 묻는 질문 게시판 등 다양한 게시판 기능을 무료로 제공
4. 워드프레스에서 많은 회원을 관리할 수 있는 최적의 회원 관리 시스템 제공
5. 다양한 액션(action), 필터(filter), Shortcode 등의 기능을 통해 확장 기능 제공
6. 다국어 기능 및 보안 인증서(SSL) 기능을 지원
■ 망보드 설치 및 게시판 추가 방법
1. 망보드를 설치하기 위해서는 먼저 워드프레스가 설치되어 있어야 합니다.
2. 워드프레스 설치방법: https://www.mangboard.com/lecture/?vid=1
3. 망보드 설치 및 게시판 연결방법: https://www.mangboard.com/lecture/?vid=2
■ 망보드 설치 동영상 강의
초보자 분들을 위한 망보드 설치 동영상 강의
https://www.mangboard.com/video/?vid=1
■ 망보드 게시판 설정 방법
1. 갤러리,캘린더,웹진,문의하기,자주묻는질문 게시판 설정방법
https://www.mangboard.com/lecture/?vid=4
2. 초보자 분들을 위한 동영상 강의
https://www.mangboard.com/video/?vid=4
※ 1개의 페이지에 1개의 게시판만 표시되며, 2개이상의 게시판 숏코드를 사용할 경우 표시되지 않습니다.
한페이지에 2개 이상의 게시판 목록이 필요하신 분들은 최근 게시물 위젯을 이용해 주셔야 합니다.
■ 망보드 게시판 숏코드 속성 및 샘플코드
망보드에서 사용할 수 있는 게시판 숏코드 속성 및 샘플코드 소개
https://www.mangboard.com/tip/?vid=2
■ 망보드 회원관리 기능 추가하기
회원 관리(로그인,회원가입, 회원정보, 비밀번호 수정 등) 기능은 망보드 비즈니스 패키지를 통해 제공
1. 망보드 비즈니스 라이트 패키지(회원기능)
https://www.mangboard.com/store/?vid=91
2. 망보드 비즈니스 패키지(회원기능,소셜로그인,소셜공유)
https://www.mangboard.com/store/?vid=9
■ 망보드 쇼핑몰 기능 추가하기
쇼핑몰 기능은 망보드 커머스 패키지를 통해 제공
https://www.mangboard.com/store/?vid=10
■ 망보드 업데이트 주의사항
망보드 업데이트가 아닌 워드프레스 업데이트를 이용하시면 수정 및 새로 추가한 파일이 삭제됩니다
https://www.mangboard.com/notice/?vid=7
■ 망보드 파일 경로
플러그인 경로 : wp-content/plugins/mangboard/
- 망보드 스킨 경로 : wp-content/plugins/mangboard/skins/
- 망보드 플러그인 경로 : wp-content/plugins/mangboard/plugins/
- 망보드 모델 경로 : wp-content/plugins/mangboard/models/
- 망보드 템플릿 경로 : wp-content/plugins/mangboard/templates/
업로드 파일 경로 : wp-content/uploads/mangboard/
■ 망보드 게시판 기능 수정 방법
망보드는 게시판 수정을 보다 쉽게 제공하기 위해서 모델링이란 방식을 제공하고 있습니다
모델링은 망보드를 수정해서 사용하기 위해 꼭 필요한 내용으로 모델링에 대한 이해없이는
게시판 기능을 수정해서 사용하실 수 없습니다.
1. 모델링 강의
https://www.mangboard.com/tip/?vid=4
https://www.mangboard.com/lecture/?vid=5
2. 초보자분들을 위한 모델링 동영상 강의
https://www.mangboard.com/video/?vid=5
https://www.mangboard.com/video/?vid=6
3. 모델링 샘플 코드
https://www.mangboard.com/tip/?vid=3
4. 모델링 매뉴얼
https://www.mangboard.com/manual/modeling/
■ 최근 게시물 추가하기
망보드의 최근 게시물을 워드프레스 페이지에 연결하는 방법 소개
https://www.mangboard.com/lecture/?vid=13
■ 홈페이지 상단에 로그인/로그아웃 버튼 추가하기
홈페이지 상단에 로그인/로그아웃 버튼 추가 방법 소개
https://www.mangboard.com/tip/?vid=13
■ 다국어 기능 설정방법
망보드의 다국어(영어,중국어,일본어) 설정 방법 소개
https://www.mangboard.com/tip/?vid=32
망보드 기본 개념 이해하기
1. 모델 (mangboard/models)
– 게시판의 설계를 담당하는 역할을 하며, 한개의 게시판은 반드시 한개의 모델과 연결됩니다
(모델 파일이 설정되어 있지 않은 게시판은 "mangboard/skins/스킨이름/includes/skin-model.php" 파일로 설정됩니다)
– 모델에 작성된 순서대로 한줄의 코드가 한개의 템플릿과 매칭되어 게시판 태그를 생성합니다
– 데스크탑, 태블릿, 모바일 등 다양한 디바이스에 따라 각각의 모델을 정의하여 보다 쉽게 반응형 웹을 구축할 수 있습니다
2. 템플릿 (mangboard/templates)
– 템플릿에는 게시판을 구성하는 다양한 기능들이 구현되어 있는 곳으로 필요시에 따라 꺼내서 사용할 수 있습니다
– 템플릿 폴더는 폴더 내부의 모든 파일을 자동으로 읽도록 설정되어 있어서 템플릿 파일 복사만으로
쉽게 템플릿을 추가할 수 있습니다
– HTML5 같은 새로운 기술이 나오면 기존의 게시판 구조의 수정없이 템플릿 추가만으로 새로운 기술을 적용할 수 있습니다
3. 스킨 (mangboard/skins)
– 기본 스킨은 기본적으로 일반 게시판, 갤러리, 캘린더 3가지 형태를 지원하며, 다양한 형태로 수정해서 사용할 수 있습니다
– 스킨폴더에 새로운 스킨을 업로드 하면 자동으로 등록이 되고, 관리자>게시판 설정>스킨이름 리스트에 추가됩니다
– 망보드 버젼업시 호환성 문제를 줄이기 위해 스킨은 최소한의 역할(레이아웃, 디자인)만을 담당합니다
4. 플러그인 (mangboard/plugins)
– 게시판을 구성하는 중요한 기능들은 각각의 플러그인으로 분리되어 있고, 사용자가 직접 플러그인을 개발하여
추가할 수 있습니다
– 플러그인 폴더에 복사된 플러그인들은 "폴더/폴더.php" 방식으로 플러그인 폴더 이름과
동일한 PHP 파일이 폴더 내에 존재해야 플러그인으로 등록됩니다
5. API (mangboard/api)
– 게시판의 버튼 이벤트는 거의 대부분 API 폴더 내부에 있는 API 파일들과 통신을 하여 동작합니다
– 모바일앱 개발시 API 폴더에 있는 API 파일들을 이용하시면 별도의 API 를 추가로 개발하지 않아도 됩니다
6. 코어 (mangboard/includes)
– 게시판의 핵심 파일들이 들어 있는 폴더로 이 폴더 내부의 파일들에 대한 수정은 권장하지 않습니다
– 워드프레스에서 제공하는 필터와 액션 기능들을 통해 코어 파일들을 수정하지 않아도 게시판 기능들을 수정할 수 있는
방법들을 제공합니다
7. 필드 매니저 (mangboard/includes/mb-fields.php)
– 필드 매니저는 테이블 필드의 목록과 이름을 관리하는 역할을 하며 필드 매니저에 정의가 되어 있는 테이블 필드에 한해서만
모델에서 사용("field":"fn_title")이 가능합니다
– 모델을 통해 만들어진 글쓰기 폼에서 전송된 내용들을 디비 테이블에 들어갈 수 있는 데이타 또는 INSERT 쿼리로 전환하는데
사용됩니다
기존의 다른 게시판에서는 글작성시 새로운 항목을 추가하기 위해 form 태그와 디비 연결부분 2군데를 수정해야 했다면,
망보드에서는 모델에서 새로운 항목을 추가하기만 하면 됩니다
(게시판, 댓글, 회원관리 필드 매니저에는 기본적으로 5개의 확장 필드 ext1~ext5가 추가되어 있습니다)
– 모델을 통해 게시판 각각의 필드 매니저를 설정할 수 있어 망보드 이외의 게시판을 망보드 내부로 불러오거나 디비에
존재하는 다른 테이블을 연결해서 게시판 형태로 관리할 수 있습니다
망보드 회원 관리 기능 이해하기
1. 망보드에서 제공하는 회원 관리 기능은 2가지 방식으로 사용할 수 있습니다
1) 워드프레스("WP-USER")
– 워드프레스 회원 관리 시스템의 기능을 그대로 망보드 회원 관리 기능에 적용해서 사용합니다
– "MB-BASIC" 버젼은 "WP-USER" 기능만 사용 가능합니다
2) 망보드("MB-USER")
– 워드프레스에서 많은 회원을 보다 쉽고 빠르게 관리하기 위해 제공하는 기능입니다
– 워드프레스에서 제공하는 회원가입 페이지에서 가입한 회원은 2가지 방식 모두 로그인이
가능하지만, 망보드에서 제공하는 회원가입 페이지에서 가입한 회원은 망보드에서 제공하는 로그인 페이지를 통해서만
로그인이 가능합니다
– "MB-USER" 기능은 비즈니스 패키지를 설치해야 사용이 가능합니다
2. 회원 관리 기능에 대한 설정은 "관리자>Mangboard>옵션설정" 회원 모드에서 "WP-USER", "MB-USER" 선택해서 사용하실 수 있습니다
3. 망보드는 비즈니스 패키지를 통해 "로그인, 회원가입, 회원정보, 비밀번호 수정, 비밀번호 찾기"와 같은 회원 관리 기능을 Shortcode 형태로 제공합니다
4. 회원 관리 시스템은 WP-USER=>MB-USER로 전환은 가능하지만 MB-USER=>WP-USER 으로 전환하게 되면 일부 사용자 로그인 기능이 오동작하는 문제가 발생할 수 있어, 초기에 신중하게 선택하시기 바랍니다
※ 회원 관리 시스템을 2개로 분리한 이유
비즈니스 패키지에서 회원 버젼을 2개로 분리할 수 있도록 한 이유는 워드프레스가 회원마다 20~50개의 데이타를 생성하기 때문에 회원이 10만명이 되면 회원 한명 방문시 최소 200만개의 데이타에서 20~50개의 회원 데이타를 찾아야 하는 문제가 발생하기 때문입니다. 200만개의 데이타에서 20개의 회원 데이타를 찾는 시스템과 10만개의 데이타에서 1개의 회원 데이타를 찾는 시스템의 차이라고 생각하시면 됩니다. 일반적으로 디비 데이타가 50만개가 되기 전까지는 일반 사용자가 속도를 크게 느끼지 못하지만, 50만개를 넘어가면 속도가 조금씩 느려지는게 느껴지는데, 여기에 방문자가 증가하면 느려지는 속도는 뚜렷하게 나타납니다. 망보드 회원 관리 시스템은 이러한 워드프레스의 단점을 보완하기 위해 2가지 방식을 제공합니다
(WP-Members 플러그인을 사용하면 회원이 늘어날 수록 홈페이지가 쉽게 느려지는 현상을 보완해 주는 기능입니다)
모델-템플릿-스킨 구조 이해하기
망보드WP는 새로운 기술을 보다 쉽게 적용하면서 확장성을 높이기 위해
"모델-템플릿-스킨" 형태의 구조를 사용하여 개발이 진행 되었습니다
모델을 통해 게시판을 보다 쉽게 수정 및 관리할 수 있으면서 다양한 디바이스 환경에 대응할 수 있고,
템플릿을 작은 컴포넌트 형태로 세분화해서 확장성을 높이면서 새로운 기술을 쉽게 추가할 수 있도록 하였습니다
스킨의 역할은 "디자인" 영역으로 최소화해서 게시판 버젼업시 발생하는 호환성 문제를 줄일 수 있도록 하였습니다
1. 모델
– 모델은 게시판의 설계를 담당하는 역할을 하며 JSON 구조로 구성되어 있습니다
– 게시판 기본 모델(skin-model) 파일은 mangboard/skins/스킨이름/includes/skin-model.php 입니다
– 아래의 코드는 글작성시에 작성자 이름에 대한 설정을 정의한 모델 코드 샘플입니다
{"field":"fn_user_name","name":"작성자","type":"text","width":"150px","maxlength":"20","required":"(*)"},
2. 템플릿
– 모델에서 정의한 타입에 맞는 템플릿 코드를 찾아 HTML 태그로 전환해 주는 역할을 합니다 ("type":"text")
– 템플릿 폴더 (mangboard/templates)를 보시면 mtpl 로 시작하는 모델 템플릿과 tpl 로 시작하는 일반 템플릿 파일을
보실 수 있습니다
– 게시판을 담당하는 "tpl.board.php", 관리자를 담당하는 "mtpl.admin.php", INPUT 태그를 담당하는 "mtpl.input.php" 파일
3개가 핵심 템플릿 파일입니다
[ Text 를 생성하는 템플릿 코드]
if($type=='text'){
$template_start = '<input type="text" name="user_name" …
}else if($type=='textarea'){
…
}
3. 스킨
– 템플릿에서 넘겨 받은 HTML 태그에 CSS를 적용하여 사용자에게 보여주는 역할을 합니다
[ 템플릿에서 넘겨 받은 HTML 코드 ]
<tr id="mb_board1_tr_user_name">
<th scope="row"><label for="mb_board1_i_user_name">작성자(*)</label></th>
<td><input class="user_name" style="width:150px;" name="user_name" type="text"></td>
</tr>
[ HTML 코드에 CSS 가 적용된 화면 ]
모델링 개념 이해하기
1. 망보드에서 모델이란…
– 게시판의 설계를 담당하는 역할을 하며, 한개의 게시판은 반드시 한개의 모델과 연결됩니다
– 모델에 작성된 순서대로 한줄의 코드가 한개의 템플릿과 매칭되어 게시판 태그를 생성합니다
– 모델 폴더 : 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. 모델 파일
– 스킨과 모델을 별도로 관리해야 하는 번거로움을 최소화하기 위해 스킨마다 고유의 모델 파일을 가지고 있으며,
게시판 추가시 기본 모델로 설정됩니다
– 스킨 모델 파일 : mangboard/skins/스킨이름/includes/skin-model.php
– 모델 폴더(mangboard/models)는 스킨 모델 파일 이외의 모델 파일들을 관리하는 폴더입니다
– 같은 스킨을 사용하는 2개 이상의 게시판에 같은 기능의 모델 파일을 설정하려면 스킨 모델 파일을
모델 폴더(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'] = '………'; // 모바일 글목록 모델을 수정
6. 모델링 동영상 강의
– 리스트 화면 모델링 설정방법 : 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보다 작거나 같은 회원에게만 보임
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 속성 (망보드 1.4.2버전 이상부터 지원)
– 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 속성
– 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")
– path : 파일의 경로를 입력하는 속성으로 "mangboard" 폴더 내부의 경로를 입력한다 (생략시 스킨의 경로가 디폴트로 설정)
– file_name : 불러올 파일 이름을 입력한다
ex) {"tpl":"include_file","path":"plugins/","file_name":"파일 이름"},
3. Filter 함수 실행하기 ("tpl":"filter")
– filter_name : 실행할 Filter 함수 이름을 입력한다
ex) {"tpl":"filter","filter_name":"필터 이름"},
4. Action 함수 실행하기 ("tpl":"action")
– action_name : 실행할 Action 함수 이름을 입력한다
ex) {"tpl":"action","action_name":"필터 이름"},
'IT' 카테고리의 다른 글
| wordpress 예약되어 있는 유지보수 에러 (0) | 2021.08.21 |
|---|---|
| 구글 폰트 적용 (0) | 2021.08.18 |
| Mysql socket error (0) | 2021.08.14 |
| The REST API did not process the context query parameter correctly. (0) | 2021.08.14 |
| 워드프레스 참고 사이트 (0) | 2021.08.11 |
