1. 기본이해
UBOARD
UBOARD 는 테크노트 기반의 Ajax Framework 입니다.
아주 간단한 방법으로 웹2.0 트렌드의 SMART UI 를 구현합니다
적용범위는 TECHNOTE 에 종속되지 않고 홈페이지 내의 모든 영역에 대해 적용됩니다.
기본 패키지에는 Ajax 형 게시판 유틸 및 표준스킨이 들어 있습니다.
테크노트
TECHNOTE6, TECHNOTE7 버전은 웹사이트 제작용 웹프로그램입니다.
게시판, 회원관리, 홈페이지 빌더, 쇼핑몰 빌더.. 등 웹 사이트제작에
필요한 다양한 기능을 갖춘 비정형 통합 솔루션입니다.
Ajax
Asynchronous JavaScript XML 의 약자로서
'자바스크립트를 활용한 비동기식 XML 통신방식' 으로 풀이될 수 있습니다.
웹브라우저의 제어 없이 XMLHttpRequest 객체로 웹 서버와 통신함으로서
페이지 이동 동작 없이 내부적으로 서버와 교신할 수 있습니다. 이를 활용해
페이지가 출력고정(정지)된 상태에서도 페이지 내의 여러 영역들을 각각
출력 제어할 수 있게 됩니다.
UBOARD 용도
Ajax 출력 방식을 최대한 쉽고 간단한 방법으로 구현할 수 있도록 해 줍니다.
어떤 출력요소(컨텐츠)를 Ajax 방식으로 구현 하고자 할 때 UBOARD를 사용합니다.
기본 패키지에는 Ajax 형 게시판 스킨이 들어 있습니다. 이것은 홈페이지내의
모든 페이지에(경로에 상관 없이) 간단한 html 태그만으로 게시판 자체 및 게시판과
관련된 컨텐츠를 삽입할 수 있게 합니다.
HTML 태그를 넣을 수 있는 곳은 모두 적용되므로
이미 완성된 홈페이지나 타사의 웹프로그램에 대해서도 적용이 가능합니다.
Framework
개발 방법의 일관성 있는 적용을 위하여 개발 방법론을 토대로 이루어진
규칙적 기능의 틀을 뜻합니다. 웹 컨텐츠 제작의 기반이 되는 공유 Library 와
보조적 역할의 Utility 들이 이에 포함됩니다.
규칙과 기능이 내장된 개발(제작) 시스템 이라고 정의될 수 있습니다.
2. 설치순서
1. 'TECHNOTE' 정식버전 설치 (TECHNOTE6.9 이상 버전)
제작사 홈페이지에서 'TECHNOTE7' 버전을 다운 받습니다.
다운 받은 파일을 PC에서 압축 해제하고 manual.html 를 open 합니다.
매뉴얼 내의 설치 설명에 따라 테크노트를 설치 합니다.
2. 'UBOARD' 패키지 설치
1. 제작사 홈페이지에서 UBOARD 패키지를 다운 받아 pc 에서 압축 해제합니다.
2. TECHNOTE 정식버전이 설치된 경로에 맞게 파일을 올립니다. TECHNOTE 가
'
technote7' 이라는 폴더에 설치되어 있는 경우 아래와 같이 파일을 올립니다.
technote7/skin_uboard/*
UBOARD 스킨폴더
technote7/ub.php
UBOARD 메인접속
technote7/include/public_inc/util_ub.php
UBOARD sub연결
technote7/include/admin/board/ub_conf.php
UBOARD 관리설정
technote7/include/admin/board/ub_help.php
UBOARD 관리설정 매뉴얼
technote7/include/admin/board/frame.php
게시판 설정 좌측메뉴
technote7/include/admin/root/top_board/board_list.php
전체관리→보드관리→목록
technote7/include/admin/root/top_board/board_copy.php
전체관리→보드관리→복사
technote7/include/admin/root/top_skin/builder.php
전체관리→빌더→메인
technote7/include/admin/root/top_skin/builder_kit.php
전체관리→빌더→생성
technote7/include/admin/root/top_db/file_viewer.php
전체관리→DB관리→탐색기
3. UBOARD 생성
a. 테크노트 전체관리(admin.php) → 보드관리 → [보드생성] 에서 게시판을 생성합니다.
b. 테크노트 전체관리(admin.php) → 보드관리 → [보드관리-통합] 에서 위 a 항에서 생성한
게시판의 관리설정 페이지로 접속합니다.
c. 관리설정 페이지 좌측 하단에 [UBOARD 관리설정] 을 메뉴을 클릭해서 UBOARD 를 생성합니다.
d. UBOARD 설정페이지 좌측의 카테고리 메뉴를 통해 카테고리를 생성합니다.
e. UBOARD 설정페이지에 예시되는 Ajax 형 게시판 기본 태그를 복사해서 홈페이지 내의
아무곳에나 붙여 넣고 출력상태를 확인합니다.
3. 폴더/파일구성
4. 출력적용
설치정보 예
ㆍ 테크노트 설치 URL :
http://www.abcd.com/technote7/
ㆍ 출력연동 게시판명 :
ubtest
ㆍ uboard 스킨폴더명 :
standard
※ 이하 설명은 TECHNOTE 및 UBOARD 설치정보가 위와 같다는 가정하의 설명입니다.
※ UBOARD-Ajax 게시판은 원형 테크노트에서 생성한 게시판TABLE(DB)을 공유합니다.
UBOARD 출력 기본태그
<script src="/technote7/skin_uboard/
standard/ub_js/uboard.js" type="text/javascript"></script>
<div class="
is_uboard">
<input type="hidden" name="
fix_board_name" value="
ubtest">
<input type="hidden" name="
fix_category_num" value="
2">
</div>
ㆍ
녹색 문자열은 사용환경에 따라 사용자가 변경할 수 있는 요소입니다.
ㆍ
갈색 문자열은 변경할 수 없는 고정값입니다.
ㆍ
군청색 문자열은 설정옵션 key 로서 규정된 문자열만 선택사용 가능합니다.
ㆍ 위 태그를 넣은 곳에는 UBOARD 의
2 번 카테고리 설정에서 지정한 컨텐츠가 출력됩니다.
html 태그를 넣을 수 있는 홈페이지 내의 모든 페이지에 적용됩니다.
출력물은 UBOARD 자체 게시판류 일 수도 있고 외부 경로의 무엇일 수 도 있는데 이는
카테고리별 설정 페이지에서 설정합니다.
ㆍ 한 페이지(html) 내에 <script ... uboard.js></script> 코드는 한 차례만 들어 가고
<div class="
is_uboard">...</div> 는 필요한 만큼 넣을 수 있습니다.
ㆍ <div class="
is_uboard">...</div> 형식은 div 태그에만 적용 되는 것이 아니고
<td class="
is_uboard">...</td> , <span class="
is_uboard">...</span>
과 같이 div, td, dl, td, dd, span .. 등 다른 태그에도 적용해도 됩니다.
ㆍ <div class="
is_uboard">...</div> 태그는 <uboard>...</uboard> 로 작성해도 됩니다.
html 규정대로 라면 위 형식으로 작성해야 되지만 코드의 가독성과 작업 편리성 또는
is_uboard 가 아닌 다른 className 를 지정해야 하는 경우에는
아래처럼 <uboard>...</uboard> 태그로 작성합니다. 출력결과는 동일합니다.
<uboard>
<input type="hidden" name="fix_board_name" value="ubtest">
<input type="hidden" name="fix_category_num" value="2">
</uboard>
UBOARD 출력 확장태그
UBOARD 출력조건은 기본적으로 각 카테고리별 설정페이지에서 지정하지만
html 부분에서도 여러 설정옵션을 사용할 수 있습니다. 이를 이용하여 상황에 따라 유연하게
다양한 출력조건을 만들 수 있으며 javascript 에 의한 동적제어(Dom) 가능하게 됩니다.
<script src="/technote7/skin_uboard/
standard/ub_js/uboard.js" type="text/javascript"></script>
<div class="
is_uboard" id="
ub_test" style="width:500px; background-color:#ffffff;">
<input type="hidden" name="
fix_board_name" value="
ubtest">
<input type="hidden" name="
fix_category_num" value="
2">
<input type="hidden" name="
fix_category1" value="
뉴스">
<input type="hidden" name="
fix_category2" value="
생활,문화">
<input type="hidden" name="
fix_call_file" value="
bbs4_both.php">
<input type="hidden" name="
fix_request" value="
openmode=body&no=4">
<input type="hidden" name="
fix_open_block_id" value="">
<input type="hidden" name="
fix_open_focus_id" value="">
<input type="hidden" name="
fix_body_block_id" value="">
<input type="hidden" name="
fix_body_view_only" value="">
<input type="hidden" name="
fix_add_url_param" value="">
<input type="hidden" name="
fix_add_js_src" value="">
<input type="hidden" name="
fix_add_css_src" value="">
<input type="hidden" name="
fix_GET[key1]" value="
AA">
<input type="hidden" name="
fix_GET[key2]" value="
BB">
<input type="hidden" name="
fix_GET[key3]" value="
CC">
.......
.......
</div>
fix_board_name
기본 연동될 게시판(전체관리→보드관리 에서 생성) 이름을 지정합니다.
fix_category_num
출력대상 카테고리 번호를 지정합니다.
지정한 카테고리의 설정대로 출력이 이뤄집니다.
카테고리 번호는 UBOARD 관리설정 좌측의 [카테고리 TREE] 에 표시되어 있습니다.
fix_category1
'카테고리 분류 1단계에 해당되는 명칭' 을 지정합니다.
출력대상 카테고리를 번호가 아닌 '명칭' 으로 지정해야 할 때 활용합니다.
가변적인 카테고리를 규정해야 할때 유용합니다. (ex, 쇼핑몰의 상품별 게시판)
이 설정이 유효하려면 위의
fix_category_num 값은 지정하지 말아야 합니다.
fix_category2
'카테고리 분류 2단계에 해당되는 명칭' 을 지정합니다.
출력대상 카테고리를 번호가 아닌 '명칭' 으로 지정해야 할 때 활용합니다.
가변적인 카테고리를 규정해야 할때 유용합니다. (ex, 쇼핑몰의 상품별 게시판)
이 설정이 유효하려면 위의
fix_category_num 값은 지정하지 말아야 합니다.
이 설정이 유효하려면 상위 카테고리인
fix_category1 이 반드시 지정되어야 합니다.
fix_call_file
출력연결 대상 파일을 지정합니다.
1. 스킨 폴더내의 파일 연결 방법
'
abcde.php' 와 같이 파일 이름만 지정한 경우
'/technote7/skin_uboard/standard/
abcde.php' 파일로 인식하여 URL 로 연결됩니다.
UBOARD 스킨폴더 내의 php 파일을 연결할때 이 방식으로 지정합니다.
2. 외부 파일 연결 방법
'
URL:/forum/item/info.php' 와 같이
URL: 을 앞에 붙일 경우
'
/forum/item/info.php' 를 URL 주소로 인식하여 연결됩니다.
'
URL:http://abcd.com/forum/item/info.php' 처럼 전체 url 형식으로 지정해도 됩니다.
스킨폴더 외부의 어떤 파일을 연결할때 이 방식으로 지정합니다. URL 연결이므로
html, php, asp, jsp.. 어떤 파일이건 상관 없지만 같은 홈페이지 내의 파일 이어야 합니다.
※ 참고
본 태그확장 옵션에 의한 출력파일 지정은 접속자에 의해 변경될 수 있습니다.
즉, 태그를 임의 변경하여 동일한 카테고리를 abcde.php 스킨 파일로도 출력할 수 있고
efgh.php 파일로도 출력할 수 있으므로 보안성이 낮아 집니다. 만약, 이 옵션을 차단하려면
[카테고리 설정]→[2. 스킨파일 지정]→[스킨파일 다중적용] 을 Off 시키면 됩니다.
fix_request
UBOARD 출력연결 URL 에 '정적인' 파라메타(변수)를 추가합니다.
ex, '
openmode=list' 게시판 글목록 출력(기본값)
ex, '
openmode=body' 게시판 본문 가장 최근글 출력
ex, '
openmode=body&no=5' 게시판 본문 5번글 출력
ex, '
openmode=body&no=5&body_only=y' 게시판 본문 5번글 출력 & 하단 글목록 생략
ex, '
openmode=write' 글쓰기폼 출력
ex, '
ub_search=한국&ub_shwhere=tbody' 검색모드 : 검색어=한국 & 검색필드=tbody
ex, '
abce=AAA&efgh=BBB&....' 스킨파일에서 $_GET['abce'],$_GET['efgh']... 배열로 받음
fix_add_url_param
UBOARD 연결 URL 에 '동적인' 파라메타(변수)를 추가합니다.
위의
fix_request 와 같은 속성을 갖고 있습니다만,
변경이 잦은 변수를 전송할때 사용됩니다. 페이지번호,정렬키,글번호... 등
ex, '
abce=AAA&efgh=BBB&....' 스킨파일에서 $_GET['abce'],$_GET['efgh']... 배열로 받음
fix_open_block_id
컨텐츠가 출력될 블록의 아이디를 지정합니다.
기본적으로는 uboard 태그를 넣은 위치에 출력되지만 특별히 다른 블록에
출력되도록 하려면 해당 블록의 아이디를 지정해 주면 됩니다. 출력코자 하는
div, td, span, dl, dt, dd ... 에 아이디를 명시하고 해당아이디를 지정합니다.
fix_open_focus_id
컨텐츠 출력화면 기준점(focus) 아이디를 지정합니다.
uboard 블록 안에서 페이지 이동시마다 이 지정 위치가 화면상단에 맞춰집니다.
ㆍ 특정 영역(지점)의 아이디를 지정하면 해당 지점이 포커싱됩니다.
ㆍ '
_self' 를 지정하면 uboard 태그 삽입 위치가 포커싱 됩니다(기본값)
ㆍ '
_top' 을 지정하면 페이지의 최상단이 포커싱 됩니다.
ㆍ '
none' 을 지정하면 포커싱 동작이 차단됩니다.
fix_body_block_id
게시판에서 글제목을 클릭했을때 본문이 출력될 영역을 별도 지정하려면
출력대상 블록(div, td, span, dl, dt, dd ...)의 아이디를 지정해 줍니다.
'글목록 영역' 과 '본문 영역' 이 동떨어진 페이지 구성일때 필요합니다.
fix_body_view_only
게시판의 본문내용 출력시 [본문+목록] 구성으로 출력되게 하려면 'n' 를 지정하고
[본문] 만 단독 출력되게 하려면 'y' 를 지정합니다.
[카테고리 설정]→[6-2. 본문]정→[본문내 출력요소]→[글목록] 의 설정이 기본적으로
적용되고 본 설정옵션은 그 설정을 일시적으로 변경해야 할 때 사용합니다.
fix_add_js_src
UBOARD 출력 연결시 특정 javascript 파일을 로딩하려면 해당 .js 파일의 url 을 대입합니다.
fix_add_css_src
UBOARD 출력 연결시 특정 style시트 파일을 로딩하려면 해당 .css 파일의 url 을 대입합니다.
fix_GET[key1] ,
fix_GET[key2] ,
fix_GET[key3] ...
변수 전송 옵션입니다. 이 방법으로
전송한 값은 php 실행파일(스킨파일)에서 $_GET[] 배열 변수로 받으면 됩니다.
즉, $_GET['key1'] , $_GET['key2'] , $_GET['key3'] ... 변수 형태로 값을 사용하면 됩니다.
'key1', 'key2', 'key3'... 문자열은 고정된게 아니니 임의로 정해서 작성하면 되고
필요한 만큼 추가하면 됩니다. html 단에 어떤 설정항목을 만들때 주로 활용합니다.
fix_control_option ,
fix_post_form ,
fix_after_function ...
기타 고급옵션이 있음.
※ [참조]
fix_.... 값들은 지속성을 지니고 있으므로
fix_.... 적용으로 출력된 영역을
fix_.... 지정없이 링크 연결해도 우선 지정되어 있던
fix_.... 값이 그대로 적용됩니다.
우선 적용된
fix_.... 값을 모두 초기화 시키려면 링크태그의 첫번째 인자에
fix_clear_all=y 를 포함시키면 됩니다.
UBOARD 링크태그
일반 페이지의 링크 태그는
<a href="/info/abcd.php">링크메뉴</a> 형태란건 알고 있을 겁니다.
그런데 UBOARD 는 외부 페이지로 이동하는게 아니라, 현재 출력된 페이지 내의 특정 영역 즉,
div, td, span, dl, dt, dd... 등의 영역안에 출력물을 불러 오는 것이므로 일반 링크형식과 다릅니다.
<script src="/technote7/skin_uboard/
standard/ub_js/uboard.js" type="text/javascript"></script>
.................... ex, 출력영역 ....................
<!-- ex, uboard 가 출력된 영역 -->
<div class="
is_uboard" id="
exm_id1" style="width:500px; background-color:#ffffff;">
<input type="hidden" name="
fix_board_name" value="
ubtest">
<input type="hidden" name="
fix_category_num" value="
2">
<input type="hidden" name="
fix_call_file" value="
bbs4_both.php">
</div>
<!-- ex, 일반 div 영역 -->
<div id="
exm_id2">
우리나라 대한민국....
동해물과 백두산이....
</div>
<!-- ex, 일반 table → td 영역 -->
<table width=400>
<tr><td id="
exm_id3">겨울바다 어쩌구..</td></tr>
<tr><td id="
exm_id4">무릉계곡 어쩌구..</td></tr>
</table>
..................... 링크태그 ....................
<!-- [ex 1] 'exm_id1' 영역에 출력하는 링크 -->
<a onclick="
UBOARD_CALL('
fix_category_num=
4','
exm_id1')">
exm_id1 영역에 카테고리
4 출력하기
</a>
<!-- [ex 2] 'exm_id2' 영역에 출력하는 링크 -->
<a onclick="
UBOARD_CALL('
fix_board_name=
ubtest&
fix_category_num=
3','
exm_id2')">
exm_id2 영역에 카테고리
3 출력하기
</a>
<!-- [ex 3] 'exm_id3' 영역에 출력하는 링크 -->
<a onclick="
UBOARD_CALL('
fix_board_name=
ubtest&
fix_category_num=
5','
exm_id3')">
exm_id3 영역에 카테고리
5 출력하기
</a>
<!-- [ex 4] 'exm_id4' 영역에 외부 URL 출력하는 링크 -->
<a onclick="
UBOARD_CALL('
fix_call_file=
(URL:/myitem/rank_list.php)','
exm_id4')">
exm_id4 영역에 외부 URL 연결 출력하기
</a>
[
ex 1] :
exm_id1 영역은 UBOARD 태그에 의해 이미 UBOARD 를 출력한 영역이므로
링크태그 에서는 변동값만 쿼리로 넣어 주면 됩니다. (
'fix_...' 값은 지속성을 지님)
[
ex 2, 3] :
exm_id2,
exm_id3 영역은 UBOARD 태그가 아닌 일반 영역 이므로 기본 쿼리를
다 넣어서 전송해야 합니다. 기본쿼리란건 위
기본태그 ,
확장태그 에 나와 있는
<input ... naem='
fix_...' ...> 설정 요소들을 말합니다.
[
ex 4] :
exm_id4 영역에 URL을 연결 출력하는 예입니다.
UROARD 내의 php 를 거치지 않고 곧바로 지정한 URL에서 데이타를 가져옵니다.
URL 은 같은 도메인 내의 주소만 가능합니다.
위 코드에서 보듯이 링크태그는
UBOARD_CALL() 함수 실행으로
출력연결 됩니다. 이 함수는 아래와 같이 5가지의 인수를 가질 수 있습니다.
UBOARD_CALL('
설정옵션 쿼리','
출력영역 ID','
URL 파리메타','
FORM 이름','
컨트롤옵션')
ㆍ 설정옵션 쿼리 : 위의
기본태그 ,
확장태그 에 나와 있는 input 설정 요소들.
ex,
fix_board_name=wxyz&
fix_call_file=abc.php&
fix_request=(openmode=body&no=5)&...
ex,
fix_board_name=wxyz&
fix_call_file=(URL:http://abcd.co.kr/abcd/abcd.html)&......
ㆍ 출력영역 ID : 링크 대상이 출력될 영역의 ID. (가짜 ID 를 지정하면 레이어로 출력됨)
ㆍ URL 파리메타 : UBOARD 연결 URL 주소에 덧붙여질 $_GET[] 변수 파라메타(옵션)
ㆍ FORM 이름 : form 문서 전송시 해당 form 의 name 지정(옵션) , [↓FORM 태그] 참조
ㆍ 컨트롤옵션 : 출력영역(div) 에 대한 컨트롤 옵션
ex, '
width=200,
height=350,
css_style=color:red;,
left=50,
top=30,
move_left=150,
move_top=-20'
width : 출력영역 너비
height : 출력영역 높이
css_style : 출력영역 css style
left : 레이어로 출력시 left 위치
top : 레이어로 출력시 top 위치
move_left : 레이어로 출력시 마우스 클릭지점으로 부터의 left 상대위치
move_top : 레이어로 출력시 마우스 클릭지점으로 부터의 top 상대위치
FORM 태그(입력값 전송 방식)
<form name='
test_form'
onsubmit="
UBOARD_CALL('
fix_board_name=
ubtest&
fix_category_num=
5','
exm_id3','
key1=value1&...',
this); return false;">
이름 : <input type='text' name='myname' size='15'>
메일 : <input type='text' name='mymail' size='15'>
<input type='submit' value="전송">
</form>
<!-- 위 FORM 양식을 onclick 이벤트로 전송시킬땐 this 대신 폼이름을 직접 넣는다. -->
<img src='/test/img/ok_button.gif' alt='전송버튼'
onclick="
UBOARD_CALL('
fix_board_name=
ubtest&
fix_category_num=
5','
exm_id3','
key1=value1&...','
test_form');">
'
test_form' 입력폼의 데이타를 카테고리
5 에서 설정한 대상(스킨파일)에 전송하는 태그입니다.
폼 전송후 결과 화면은 '
exm_id3' 영역에 출력됩니다.
5. 제작 가이드
본 문서는 기본적인 것만 설명하고 있으니 좀 더 구체화된 내용은 제작사 홈페이지를 참조 하십시오.
UBOARD 실행 흐름도
① 웹부라우저가 URL 주소로 웹서버에게 데이타를 요청합니다.
② 웹서버가 웹문서(html 코드)를 전송하면 웹부라우저는 이를 받아 화면에 출력합니다.
③ 웹문서에 포함되어 있는 <script src='/technote7/skin_uboard/standard/ub_js/
uboard.js'></script>
javascript 가 실행됩니다.
④ uboard.js 는 웹문서 내에서 UBOARD 태그를 찾아서 해당 태그내에 설정된
'fix_...' 값들을 해석하여 XMLHttpRequest 객체로 웹서버에 데이타를 요청합니다.
⑤ 웹서버는 요청대로 프로세싱을 거쳐 UBOARD 용 html 코드를 uboard.js 에게 반환합니다.
⑥ uboard.js 는 웹문서내의 각 UBOARD 출력 지정 영역에 html 데이타를 삽입합니다.
① ~
② 는 일반적인 웹페이지의 출력요청→완료 과정입니다. uboard.js 는
②가 반환한
문서에서 UBOARD 태그를 찾아
③ ~
⑥ Ajax 실행 과정을 진행하게 됩니다.
웹문서 내에서 UBOARD 링크태그(위의 'UBOARD
링크태그' 참조)를 클릭한 경우에도
③ ~
⑥ 의 과정이 실행되면서 링크 태그에서 지정한 영역으로 문서를 불러 옵니다.
⑤ 의 반환 데이타를 생성하기 위한 php 파일 실행은 아래의 순서는 진행됩니다.
→ technote/ub.php
→ technote/include/public_inc/util_ub.php
→ technote/skin_uboard/standard/스킨파일.php
단, 카테고리 설정에서 스킨파일 지정을 외부 url 로 설정했거나
UBOARD 삽입 태그에서 스킨파일을 외부 URL 로 지정한 경우에는
이 과정을 거치지 않고 uboard.js 에서 곧바로 해당 URL 로 연결됩니다.
내부 스킨파일 연결 이해하기 (적용파일: skin_uboard/standard/
hello_inside.php)
출력, 삽입, 링크, 폼전송 등의 연결방식을 보여 주는 것이니 따라해 보세요.
1. [UB관리설정]→[카테고리 생성] 에서 'test1' 라는 새로운 카테고리를 생성한 후
좌측의 '카테고리TREE' 에서 'test1' 의 카테고리 번호(핑크색 숫자)를 확인합니다.
2. 'test1' 카테고리의 설정페이지를 열고 [2. 스킨파일 지정]→[내부 스킨 파일로 지정]
을 '
hello_inside.php' 파일로 설정합니다.
3. 홈페이지 내에 현재 정상 출력중인 아무 페이지에 아래 태그를 복사해 넣습니다.
태그를 넣을 곳이 없다면 임의의 html 파일을 만들어 올리고 진행합니다.
카테고리 번호로 지정한
8 은 위 1항에서 실제 확인한 번호를 바꿔 넣으세요.
<script src="/technote7/skin_uboard/
standard/ub_js/uboard.js"></script>
<!-- 출력 -->
<div class="
is_uboard" id="
exm_id1" style="width:500px; background-color:#ffffff;">
<input type="hidden" name="
fix_board_name" value="
ubtest">
<input type="hidden" name="
fix_category_num" value="
8">
</div>
<!-- 링크 -->
<a onclick="
UBOARD_CALL('
fix_board_name=
ubtest&
fix_category_num=
8','
exm_id1')">[클릭1]</a>
4. 위 태그를 넣은 페이지를 웹부라우저로 연결해서 출력결과를 확인합니다.
5.
hello_inside.php 를 텍스트 편집기로 열어서 코드를 살펴 봅니다.
외부 파일 URL연결 이해하기 (적용파일:
hello_outside.php)
스킨폴더 외부의 파일에 대한 URL연결방식을 보여 주는 것이니 따라해 보세요.
1. skin_uboard/standard/
hello_outside.php 파일을 테크노트가 설치된
폴더 외부의 다른 경로에 올립니다.
2. [UB관리설정]→[카테고리 생성] 에서 'test2' 라는 새로운 카테고리를 생성합니다.
3. 'test2' 카테고리의 설정페이지를 열고 [2. 스킨파일 지정]→[외부 URL 로 지정] 에
위 1항에서 올린 URL을 지정합니다. '
URL:/mytest/hello_outside.php' 과 같이
앞에 URL: 을 붙이고 /로 시작되는 URL형식으로 지정합니다.(URL:http://.. 형식도 유효)
4. 홈페이지 내에 현재 정상 출력중인 아무 페이지에 아래 태그를 복사해 넣습니다.
태그를 넣을 곳이 없다면 임의의 html 파일을 만들어 올리고 진행합니다.
URL은 위 3항에서 지정한 것과 동일하게 바꿔 넣으세요.
<script src="/technote7/skin_uboard/
standard/ub_js/uboard.js"></script>
<!-- 출력 -->
<div class="
is_uboard" id="
exm_id2" style="width:500px; background-color:#ffffff;">
<input type="hidden" name="
fix_board_name" value="
ubtest">
<input type="hidden" name="
fix_call_file" value="
URL:/mytest/hello_outside.php">
</div>
<!-- 링크 -->
<a onclick="
UBOARD_CALL('
fix_board_name=
ubtest&
fix_call_file=
(URL:/mytest/hello_outside.php)','
exm_id2')">[클릭2]</a>
4. 위 태그를 넣은 페이지를 웹부라우저로 연결해서 출력결과를 확인합니다.
5.
hello_outside.php 를 텍스트 편집기로 열어서 코드를 살펴 봅니다.
스킨파일 수정
기본 제공된 스킨을 수정하려면 skin_uboard/standard/*.php 파일을 직접 수정하거나
파일을 다른 이름으로 복사해서 추가로 넣고 수정작업 하면 됩니다.
추가된 스킨파일을 출력 적용하려면 [카테고리 설정]→[2,스킨파일 지정] 에서 지정합니다.
NEW 컨텐츠 제작
1, 스킨 경로에 제작
skin_uboard/standard/ 폴더에 컨텐츠 출력 파일을 만들어 올리고,
위 항목에서 설명한
기본태그 ,
확장태그,
링크태그 방식으로 연결하면 됩니다.
2, 외부 경로에 제작
UBOARD 스킨폴더가 아닌 곳에 출력대상 파일이 있는 경우
ㆍ [카테고리 설정]→[2. 스킨파일 지정] 에서 해당 파일을 URL 을 지정해 줍니다.
ㆍ UBOARD 출력태그 작성시 확장태그 'fix_call_file' 에 URL 을 대입해줍니다.
ex, <input type=hidden name='
fix_call_file' value='
URL:/myitem/salse.php'>
ㆍ 해당 URL에 어떤 변수를 전달하려면 확장태그 'fix_GET[key1]' 방식을 사용합니다.
ex, <input type="hidden" name="
fix_GET[key1]" value="
AA">
ㆍ 링크(Onclick) 형식으로 외부 파일의 출력물을 삽입하려면 UBOARD 링크태그
작성시 'fix_call_file' 파라메타에 URL 을 대입해줍니다.(위의 작성예 참조)
새로운 스킨폴더 추가 방법
기본제공 스킨 : skin_uboard/
standard/
새로운 스킨 : skin_uboard/
newskin/ 처럼 같은 경로에 폴더를 추가하면 됩니다.
기본제공 스킨폴더를 복사하여 다름 이름으로 넣고 작업하면 수월합니다.
새 스킨폴더를 출력적용 하려면 [카테고리 설정]→[2. 스킨파일 지정] 을 설정 변경하고
UBOARD 출력적용 문서에는
<script src="/technote7/skin_uboard/
newskin/ub_js/uboard.js" type="text/javascript"></script>
와 같이 새 스킨폴더내의 uboard.js 를 연결하면 됩니다.
DB 테이블
UBOARD 스킨으로 구현되는 게시판은 테크노트에서 생성한 일반게시판 테이블을 사용합니다.
UBOARD 생성시 새로 생성되는 테이블은 카테고리별 설정 테이블 1개 뿐입니다.
게시판 이름이 'ubtest' 인 경우 '카테고리 설정' 테이블 명은 'a_tn2_ubtest_ub' 입니다.
그 외의 테이블은 테크노트 일반 게시판 테이블(목록,댓글,통계계,설정)을 사용합니다.
테이블 확인은 [전체관리]→[보드관리]→[보드설정] 페이지 좌.하단의 [DB>TABLE] 메뉴 입니다.
변수,함수
UBOARD 스킨에서 사용되는 변수는 기본적으로 [일반 게시판] 스킨의 변수 와 동일합니다.
단, 일반 게시판에서 사용되는 보드설정 변수($Bconfig['key']) 는 극히 일부만 사용하고 대신
UBOARD 카테고리 설정변수($Uconfig['key']) 를 사용합니다. $Uconfig['key'] 변수의 'key' 는
UBOARD 카테고리 설정페이지를 HTML 소스보기 해서 각 input 항목 name 으로 확인하거나 또는
UBOARD 카테고리 설정 원본소스 include/admin/board/ub_conf.php 하단부를 보면 됩니다.
UBOARD 복사 & 빌더
ㆍ 테크노트 전체관리→[보드관리]→[보드관리-통합] 의 [복사] 기능을 활용하면
설정이 동일한 UBOARD 를 복사 생성할 수 있습니다.
ㆍ 테크노트 전체관리→[스킨,빌더]→[빌더] 기능을 활용하면
UBOARD 를 빌더 형태로 만들어 다른 사용자에게 배포할 수 있습니다.
테크노트 설치없이 Ajax 기능만 사용
TECHNOTE 버전을 설치하지 않은 상태에서도 skin_uboard/standard/ 폴더만
홈페이지에 올려 주면 외부 URL 연결 방식 Ajax 기능은 정상적으로 사용 가능합니다.
외부 URL 연결 방식은 테크노트내의 php 파일을 거치지 않고 직접 외부 url 의 출력물을
가져 옵니다.
[ex] 팝업 레이어로 출력하기
<!-- [ex1] 팝업 레이어 출력태그 -->
<uboard style="
position:absolute; width:300px; left:50px; top:50px; border:2px solid red; background-color:#ffffff;">
<input type="hidden" name="
fix_board_name" value="
ubtest">
<input type="hidden" name="
fix_category_num" value="
2">
</uboard>
<!-- [ex2] 팝업 레이어 출력 링크 -->
<a onclick="
UBOARD_CALL('
fix_board_name=
ubtest&
fix_category_num=
5','
rest_id','','','
width=500,left=100,top=300,css_style=background-color:#ffffff;border:2px solid red;')">클릭</a>
[ex1]
2번 카테고리를 레이어로 출력함.
[ex2]
5번 카테고리를 레이어로 링크함 (
rest_id:존재하지 않는 가상 id 를 지정하면 레이이로 출력됨)
[ex] 무제한 수량의 페이지에 각각 게시판 장착하기
수백개가 넘는 웹페이지가 있고 그 각각의 페이지 안에는 그 페이지만의 게시판을 장착해야
하는 경우가 있을 수 있습니다. 가장 흔한 예로, 쇼핑몰을 보면 등록된 상품이 수천개인데
각각의 상품정보 출력 페이지 내에는 그 상품만을 위한 상품평가, QA 게시판이 장착되어
있는 걸 볼수 있습니다. 수천개의 게시판 카테고리를 일일이 생성해줄 수는 없지요.
이럴땐
fix_category1 ,
fix_category2 옵션을 사용하면 됩니다. 우선 UBOARD 의
[카테고리설정]→[전체]→[3.제한설정]→[가상 카테고리 연결 허용]→[On] 을 지정하고,
상품정보 출력 페이지 소스에는 다음과 같이 UBOARD 게시판 태그를 넣어 주면 됩니다.
상품등록 고유번호(uid)가
$GOODS['no'] 라고 가정한 예 입니다.
<!-- $GOODS['no'] 번 상품의 '상품평가' 게시판 출력태그 -->
<uboard id="
estm_block" style="width:400px; background-color:#ffffff;">
<input type="hidden" name="
fix_board_name" value="
ubtest">
<input type="hidden" name="
fix_category1" value="
estm">
<input type="hidden" name="
fix_category2" value="
<?=$GOODS['no']?>">
</uboard>
<!-- $GOODS['no'] 번 상품의 'Q&A' 게시판 출력태그 -->
<uboard id="
qna_block" style="width:400px; background-color:#ffffff;">
<input type="hidden" name="
fix_board_name" value="
ubtest">
<input type="hidden" name="
fix_category1" value="
qna">
<input type="hidden" name="
fix_category2" value="
<?=$GOODS['no']?>">
</uboard>
........ 링크태그 ...................................
<a onclick="
UBOARD_CALL('
fix_board_name=
ubtest&
fix_category1=
estm&
fix_category2=
<?=$GOODS['no']?>','
estm_block')">상품평</a>
<a onclick="
UBOARD_CALL('
fix_board_name=
ubtest&
fix_category1=
qna&
fix_category2=
<?=$GOODS['no']?>','
qna_block')">Q & A</a>
fix_category1은 임의의 단어(estm, qna)로,
fix_category2 는 상품등록 글번호로
가상 카테고리를 정의했습니다. 상품마다 각자의 UBOARD 카테고리를 갖게 된 것입니다.
이렇게 상품마다 생성된 수많은 게시판들을 다시 [상품평 게시판 전체] , [Q&A 게시판 전체] 두 게시판으로 통합출력 하려면
<!-- 상품평가 게시판 통합출력 태그 -->
<uboard id="
estm_block" style="width:400px; background-color:#ffffff;">
<input type="hidden" name="
fix_board_name" value="
ubtest">
<input type="hidden" name="
fix_category1" value="
estm">
<input type="hidden" name="
fix_category2" value="">
</uboard>
<!-- Q&A 게시판 통합출력 태그 -->
<uboard id="
qna_block" style="width:400px; background-color:#ffffff;">
<input type="hidden" name="
fix_board_name" value="
ubtest">
<input type="hidden" name="
fix_category1" value="
qna">
<input type="hidden" name="
fix_category2" value="">
</uboard>
........ 링크태그.....................................
<a onclick="
UBOARD_CALL('
fix_board_name=
ubtest&
fix_category1=
estm&
fix_category2=','
estm_block')">상품평</a>
<a onclick="
UBOARD_CALL('
fix_board_name=
ubtest&
fix_category1=
qna&
fix_category2=','
qna_block')">Q & A</a>
이렇게 됩니다. 2단계 카테고리(
fix_category2)를 초기화 시켜서
1단계 카테고리(
fix_category1)에 의해서만 분류되게 한 것입니다.
그렇다면 이번엔 [Q&A]+[상품평] 을 한개의 게시판으로 통합출력 하려면 어떻게 할까요?
바로 답이 떠오르지 않는다면 위 내용을 이해하지 못한 것이니 다시 한번 보시구요,
답은 1단계 카테고리(fix_category1)도 초기화 시키면 됩니다.
6. F A Q
좀 더 세부적인 내용은 제작사 홈페이지 게시판을 참조 하십시오.
테크노트와 UBOARD 는 다른 건가요?
'테크노트' 는 게시판,회원관리,쇼핑몰,홈빌더 등의 기능을 가지고 있는 MAIN 프로그램이고
'UBOARD' 는 '테크노트' 에 속하는 Sub 프로그램입니다. Sub 프로그램 이지만
활용 영역은 종속되지 않고 '테크노트' 외부 영역까지 확장됩니다.
UBOARD 설치 가능한 테크노트 버전은?
TECHNOTE6.9 버전(PHP) 이상이어야 합니다.
그 이하 버전이거나 TECHNOTE CGI 버전에는 설치할 수 없습니다.
게시판에 입력란 추가 하려면?
일반 게시판의 설정(uboard 설정이 아닌)→[6-16] 글쓰기 입력항목 추가 설정하기
에서 먼저 입력란 생성해 준 다음 UBOARD 게시판 스킨 소스에서 직접 입력란 태그를
넣어 주어야 합니다. 게시판 소스에서 글쓰기폼, 본문출력 해당 function 을 보면
추가입력란 적용하는 방법이 나와 있습니다.
일반게시판/UBOARD 게시판 혼용이 가능 한지요?
특정 게시판 하나를 일반게시판 형태로 사용하면서 동시에 UBOARD ajax 게시판으로
사용해도 문제는 없습니다. 다만, 일반 게시판 테이블 보다 UBOARD 게시판 테이블이
더 많은 필드를 필드를 사용하므로 효율성을 위해서는 가급적 각각의 용도로
구분해서 사용하는 것이 좋습니다.
UBOARD 를 복사하려면?
테크노트 전체관리→[보드관리]→[보드관리-통합] 의 [복사] 기능을 활용하면
설정이 동일한 UBOARD 를 복사 생성할 수 있습니다.
UBOARD 용 빌더을 제작하려면?
테크노트 전체관리→[스킨,빌더]→[빌더] 기능을 활용하면
UBOARD 를 빌더 형태로 만들어 다른 사용자에게 배포할 수 있습니다.
다른 프로그램으로 만든 홈페이지에도 적용 가능한지요?
다른 웹프로그램을 사용해 만든 홈페이지라 하더라도 UBOARD 게시판을 삽입하거나
관련 기능들을 적용 할 수 있습니다. html 태그를 넣을 수 있는 곳이면 다 가능합니다.
웹프로그램 없이 html 만으로 만들어진 홈페이지 에도 적용 가능합니다.
기본적으로 들어 있는 스킨파일들은 어떤 건가요?
UBOARD 관리설정 페이지에서 임시 적용상태로 출력확인할 수 있습니다.
또는
이곳에서 기본적인 출력형태를 확인할 수 있습니다.
게시판의 에디터를 다른걸로 바꿀수 있나요?
스킨소스에서 글쓰기폼 부분을 찾아 바꾸면 가능합니다.
기본 제공된 스킨에서는 '
NicEdit' 에디터를 적용했습니다.
크로스부라우징 되나요?
익스플로러, 파이어폭스, 크롬, 사파리, 오페라 모두 동일하게 출력됩니다.
단 글쓰기폼의 본문 편집기가 약간의 차이를 나타냅니다.
HTML 표준규약(DTD)은 어떤게 적용되나요?
html 표준으로 제작되었기 때문에 특정 규약에 종속되지 않고
동일하게 출력되므로 어떤 웹페이지에도 적용(삽입)이 가능합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
용어구분
ㆍ 일반 게시판 : 테크노트 원본에서 생성된 게시판( 출력: board.php?board=freeboard)
ㆍ UBOARD 게시판 : UBOARD 스킨에 의해 출력되는 Ajax 방식의 게시판
UBOARD 매뉴얼
카테고리 TREE
카테고리 생성,변경
카테고리 설정
