12 . 응용 , 확장
기본기능을 활용하여 사용자의 의도대로 용도를 확장하는 방법을 설명하고 있습니다.
프로그램 구조를 충분히 이해하고 나면 스스로 더 많은 응용,확장 방법을 생각해 낼 수 있게 됩니다.
util_iboard.php 활용
이 파일은 테크노트 원본에 기본적으로 포함되어 있다. 홈페이지 구성작업에서 용도 확장폭이 넓은 응용 파일이다.
* 메인 홈페이지 안에 '공지사항' 이나 특정 게시판을 작은 형태로 재구성해서 삽입시킬 수 있다.
* 테크노트에서 생성한 여러 보드들을 한 페이지 안에서 체계적으로 정리해 보여 줄 수 있다.
* 회원로그인 여부에 따라 상황에 맞게 '로그인폼'이 출력되거나 '로그아웃' 버튼이 출력되게 할 수 있다.
* 여러 보드를 통합 검색할 수 있다.
* 비정형화 된 상태이므로 내장된 코드를 적절히 이용하면 여러 가지 형태로 용도확장 시킬 수 있다.
* 사용할 필요가 없다면 삭제해 버려도 되고, 더 필요하다면 파일명을 변경해서 여러개 복사해서 사용해도 된다.
자세한 설명 보기
입력폼 양식 활용
이것은 원본 소스에 들어 있는 여러 폼양식을 응용,활용하기 쉽게 html 소스를 정리한 파일이다.
현재 테크노트가 정상설치 되어 있다면 이 파일들도 정상적으로 사용할 수 있다.
여기에 없는 폼양식 소스를 구하려면 해당 페이지를 부라우저에서 출력후 '소스보기' 해서 html 태그를 복사하면 된다.
회원로그인 폼태그 구성 (form_login.html)
회원등록 폼태그 구성 (form_mem_reg.html)
보드 글쓰기 폼 활용1 (form_write1.html)
보드 글쓰기 폼 활용2 (form_write2.html)
보드 글쓰기 폼 활용3 (form_write3.html)
보드 글쓰기 폼 활용4 (form_write4.html)
우편번호/주소 찾기 활용 (form_address.html)
보드 검색 폼태그 구성 (form_search.html)
폼메일 활용 (form_mail.php ←php 파일이니 서버에 직접 올려서 테스트 할 것)
보드설정 내의 확장 옵션
확장기능의 구체적 사용법은 보드설정 페이지에서 해당 항목의 도움말 버튼을 클릭하면 된다.
아래 내용은 기능소개 수준의 설명이다.
멀티설정 : 동일한 보드에 대해 여러개의 보드설정(스킨,테마등..)이 가능한 기능이다.
보드설정 페이지 상단에 있는 [멀티설정] 버튼을 클릭하면 멀티설정 생성창이 나타난다.
<멀티설정 기본이해>
보드를 생성하면 해당 보드에는 기본적으로 1개의 보드설정이 주어 진다.
보드 출력형태 또한 해당 보드의 설정에서 지정하는 한가지를 갖게 된다.
그런데 사이트 구성방식에 따라서는 1개 보드에 대해 1개 이상의 출력형태가 필요한 경우가 있다.
몇 가지 예를 들면 다음과 같다.
ex1, 특정 보드를 일반 방문자에게는 [글제목],[본문내용] 만 보이게 하고,
관리자에게는 [글제목],[작성자],[작성일],[아이피],[본문],[작성자 회원정보] 등을 모두 볼 수 있게 하려면?
ex2, 특정 보드를 일반홈페이지에서 사용되는 보드형태 그리고 모바일 전용 보드형태로 동시 서비스하려면?
ex3, 학교 홈페이지에서 사용되는 특정보드를 선생님이 볼 때, 학생들이 볼때, 학부모가 볼때 를
각각 다르게 구성하려면? 또는 회원 레벨별로 다르게 보여지게 구성하려면?
ex4, 홈페이지의 일부 영역 안에 보드가 삽입되어야 하는 상황과,
보드만 단독으로 출력되어야 하는 상황이 동시에 요구된다면?
이외에도 1개 보드에 대해 1개 이상의 보드설정이 필요한 경우가 얼마든지 있는데 그 경우 멀티설정도구를 사용하면 된다.
XML_RSS 등 다른 규격으로의 서비스 확장 또한 이것으로 쉽게 해결된다.
참고로 멀티설정에는 '보드스킨', '사용권한' , '기능설정' 등 보드설정의 모든 항목이 포함된다.
글쓰기 입력란 추가 : 보드설정 "[6-16] 글쓰기 입력항목 추가" 을 통해 글 입력항목을 무제한 추가할 수 있다.
한줄입력란, 래디오버튼, 풀다운메뉴, 파일첨부, 여러줄입력란 등 어떤 형태라도 추가 가능하다.
추가입력란을 통해 입력된 자료의 출력여부는 보드설정 "[4-19] 글목록 테이블 출력셀 설정" ,
"[5-21] 입력란 추가생성 내용 출력(본문)" 에서 설정할 수 있다.
글목록 출력셀 구성 : 보드설정 "[4-19] 글목록 테이블 출력셀 설정" 을 활용하면 스킨파일을 건드리지 않고도
손쉽게 보드의 글목록 테이블을 확장 및 재구성할 수 있다.
보드 설정항목 추가 : 보드설정 "10, 보드설정 항목 추가 생성하기" 을 활용하면
보드설정 페이지에 기본적으로 들어 있는 설정항목 외에 사용자가 임의 로 설정항목을 추가할 수 있다.
새로운 아이템에 대한 설정이 필요할 때 이것을 이용하면 된다.
테마 생성/관리 : 보드설정 "12, 테마활용" 을 활용하면 복잡한 보드설정을 단순 메뉴화 하여 저장 관리할 수 있다.
보드를 생성할 때마다 여러 설정항목을 일일이 재지정할 필요 없이 저장된 설정메뉴(테마) 를 선택해 주는 것만으로
특정 기능의 보드설정을 쉽게 완료할 수 있다.
MySQL - TABLE,레코드의 관리 , 수정
보드생성 스키마 셋팅 : 보드생성시 적용될 테이블-레코드 구조(schema)를 다르게 셋팅해 놓으려면
./include/schema/ 폴더내의 파일에서 변경하면 된다. 변경된 사항은 변경이후 생성되는 테이블에 적용된다.
보드 기본 설정값 셋팅 : 보드생성시 자동으로 적용될 기본 설정값을 다르게 셋팅해 놓으려면
일반보드는 ./include/admin/board/conf_array.php 소스에서 셋팅해주면 된다.
회원관리 보드는 ./include/admin/mboard/conf_array.php 소스에서 셋팅해 주면 된다.
변경된 사항은 변경이후 생성되는 보드에 적용되며 보드설정 페이지에서 [기본값 적용] 버튼을 클릭했을때도 적용된다.
레코드, 컬럼 속성, 기타 변경 : 이미 생성되어 있는 테이블의 레코드 및 컬럼 속성을 변경하려면
[종합관리Root]->[DB관리]->[MySQL-table] 페이지 내의 도구를 사용하면 된다.
파일관리-탐색기
[종합관리Root] -> [DB관리] -> [탐색기] 도구를 활용하면 테크노트 내에 존재하는 모든 파일을
MS윈도우의 '탐색기' 형태로 관리할 수 있다.
아이콘, 이미지, 문서 템플릿의 추가 및 교체
표정 아이콘 : 본문 댓글쓰기의 표정아이콘.
./skin_board/스킨명/b_img/face/ 폴더내에 아이콘 파일을 추가 및 교체하면 된다.
회원등록 캐릭터 : 회원등록시 선택하는 인물 캐릭터 이미지.
./img/character/ 폴더내에 캐릭터 이미지 파일을 추가 및 교체하면 된다.
기호, 블릿 아이콘 : 글쓰기폼->편집기 내의 기호, 블릿 아이콘.
./img/editor_sign/ 폴더내에 블릿 아이콘 파일을 추가 및 교체하면 된다.
텍스트 기호를 추가하려면 ./include/board/editsub/edit_sign.php 소스에서 직접 추가하면 된다.
배경 이미지 : 글쓰기폼->편집기 내의 배경선택 이미지.
./img/editor_bg/ 폴더내에 배경 그림 파일을 추가및 교체하면 된다.
문서 템플릿 : 글쓰기폼->편집기 내의 템플릿 문서.
./skin_board/a_standard/wr_doc/ 폴더내에 템플릿 파일을 추가및 교체하면 된다.
iwindow(인라인 아이템 창) 추가 , 수정
iwindow(인라인 아이템 창) 란 ?
우측 그림과 같은 형태의 응용 레이어 창을 의미한다.
이것이 필요한 이유는 극소 부분의 내용 변화를 위해
홈페이지 전체를 리로딩 하는 불편한 구조를 피하기 위한 것이다.
이를 이용하면 현재 페이지의 출력을 그대로 유지한 상태에서
필요한 내용만을 상위에 표출 시킴으로서 컨텐츠의 일체감 유지와
페이지 구성상의 공간 활용도를 높이는 동시만족을 얻을 수 있다.
또한 독특한 형태의 디자인을 개발하여 홈페이지 개성을 높일 수 있다.
기본스킨에는 30개 이상의 iwindow 아이템이 포함되어 있고,
개수 제한 없이 새로 추가할 수 있다.
여러 iwindow 는 각각의 php 파일에 의해 실행되는 구조이므로
단순 내용출력 이상의 특별한 기능을 프로그램 하는 것이 가능하다.
기본 내장된 iwindow 는 ?
ㆍ보드 - 글목록
회원로그인폼, 현재접속자, 정렬, 카테고리, 통계, 포인트안내, 확장검색 등...
ㆍ보드 - 본문
작성자정보, 글수정/삭제, 추천, 댓글입력폼, 쪽글입력폼 등...
ㆍ보드 - 글쓰기
투표설정(관리자전용), 도움말, 미리보기, sms설정, 비공개 예외설정 등...
iwindow 실행구조
자바스크립트 함수 iwindow_OPEN('실행파일명','창이름','쿼리옵션','출력옵션') 로 실행된다. 즉,
<a onclick="iwindow_OPEN('kakaka','aaa','var1=3&var2=abcd','width=100,height=250,left=0,top=0,btn_help=n,btn_grow=n,btn_close=y,autoclose=y,titlebar=y,new_iwin=y,css_style=')">클릭해요</a>
와 같은 태그로 작성할 수 있으며 '창이름','쿼리옵션','출력옵션' 부분은 생략하거나 추가할 수 있다.
위와 같은 링크를 클릭했을때의 동작 과정은 다음과 같다.
1, 가로100, 세로250 사이즈의 iwindow 창 aaa 가 생성된다.
2, 활성화된 iwindow 창 aaa 안에서 ./skin_board/스킨명/iwindow/kakaka.php 가 실행된다.
3, ...../kakaka.php 에는 변수 $var1=3; $var1='abcd'; 가 전달된다.
▨ [실행파일명] 에 들어갈 수 있는 형식(필수지정).
ㆍ위의 예 처럼 php 파일명(확장자를 제외한)을 넣으면 ./skin_board/스킨명/iwindow/파일명.php 가 실행된다.
ㆍ또한 출력코자 하는 외부 페이지의 url 주소(http://...)를 직접 넣으면 해당 페이지가 출력된다.
▨ [창이름] 에 들어갈 수 있는 형식(옵션지정).
ㆍ영문이나 숫자을 사용해 공백이 포함되지 않게 단어를 작성해 넣으면 된다.
ㆍ창 이름을 지정하지 않은 경우 창틀이 공유되어 'a' 창이 활성화 되어 있는 상태에서 'b' 창을 열면 'a' 창은 사라지게 된다.
ㆍ창 이름을 지정하면 같은 이름의 창 끼리만 창틀을 공유하고 다른 이름의 창은 별도의 창으로 열린다.
▨ [쿼리옵션] 에 들어갈 수 있는 형식(옵션지정).
ㆍ'실행파일명' 에 전달할 값을 'key1=value1&key2=value2&key3=value3...' 식으로 필요한 만큼 넣을 수 있다.
▨ [출력옵션] 에 들어갈 수 있는 형식(옵션지정). 미지정한 경우 기본값이 자동 적용된다.
width : 가로크기 - 픽셀수치로 지정 (기본값: 250)
height : 세로크기 - 픽셀수치로 지정 (기본값: 250)
left : 전체화면 기준 위치지정 - 전체화면 좌측과의 거리. 픽셀수치 혹은 % 비율로 지정 (기본값: 마우스 클릭한 위치+8)
top : 전체화면 기준 위치지정 - 전체화면 상단과의 거리. 픽셀수치 혹은 % 비율로 지정 (기본값: 마우스 클릭한 위치+8)
move_left : 마우스 클릭지점 기준 위치지정 - 마우스클릭한 지점과의 가로거리. 픽셀수치 (기본값: 마우스 클릭한 위치+8)
move_top : 마우스 클릭지점 기준 위치지정 - 마우스클릭한 지점과의 세로거리. 픽셀수치 (기본값: 마우스 클릭한 위치+8)
아래 설정옵션들은 y/n 대신 yes/no 또는 1/0 또는 true/false 형식으로 지정해도 된다.
btn_help : iwindow 우측상단에 도움말 버튼이 나타나게 할 것인지를 y/n 로 지정(기본값:n)
btn_grow : iwindow 우측상단에 창확대 버튼이 나타나게 할 것인지를 y/n 로 지정(기본값:n)
btn_close : iwindow 우측상단에 창 닫기 버튼이 나타나게 할 것인지를 y/n 로 지정(기본값:y)
autoclose : 바탕화면 클릭시 iwindow 가 자동으로 닫히게 할 것인지를 y/n 로 지정(기본값:y)
titlebar : iwindow 창 상단에 타이틀바를 보여지게 할 것인지를 y/n 로 지정(기본값:y)
new_iwin : 창이름과 상관없이 무조건 새창을 추가 생성-출력시킬 것인지를 y/n 로 지정(기본값:n)
css_style : iwindow 에 스타일 시트를 지정할 수 있다.(지정예: css_style=zoom:150%; border:1px solid #ff0000; )
function : 스크립트 함수를 지정한다. '실행파일명' 으로 연결하지 않고, 대신 자체 내장된 자바스크립트 함수를 실행시킨다.
(지정예: function=iview_setimg 는 자체내장된 function iview_setimg(){ .... } 함수를 실행한다.
iwindow 에 출력될 내용도 지정한 함수내에서 처리해 줘야 한다. 기본 스킨에서는 '회원사진' 팝업출력 형식이
모두 이것으로 되어 있고 서버에 재접속 없이 바로 팝업으로 회원사진 출력 되도록 되어 있다)
기본 내장된 iwindow 를 수정하려면 ?
iwindow 창 틀: ./skin_board/스킨명/iwindow/create_iwindow.js
이미지: ./skin_board/스킨명/iwindow/immg/*.gif
출력내용: ./skin_board/스킨명/iwindow/*.php
새로운 iwindow 추가 하는 방법은 ?
위 "iwindow 실행구조" 에서 설명한대로 태그를 작성해서 스킨소스에 넣어 주고
실행될 파일은 ./skin_board/스킨명/iwindow/실행파일.php 로 넣어 주면 된다.
기본적으로 들어 있는 iwondow 들도 모두 같은 구조이니 그것을 참고하면 추가작성이 한결 쉬울 것이다.
무작정 따라해 보기
기본적으로 들어 있는 ./skin_board/스킨명/iwindow/iwindow_exp1.php 를 iwindow 로 출력 하는 예이다.
1, 종합관리 페이지에서 보드(게시판)를 생성한다.
2, 생성된 보드의 [보드설정]→[4-19, 글목록 테이블 출력셀 구성] 에서 '확장셀18' 을 출력토록 '18' 을 추가 지정한다.
3, 게시판에 임의로 글 몇개를 등록하고 글목록에서 '확장셀18' 에 해당되는 셀을 클릭하면 iwindow 가 출력된다.
4, 글목록 출력 소스인 ./skin_board/스킨명/2_index.php 에서 function INDEX_cell_18() 함수를 찾아 링크태그를 확인한다.
5, ./skin_board/스킨명/iwindow/iwindow_exp1.php 소스를 열고 iwindow 출력내용 구성을 확인한다.
기 타
'iwindow 닫기' 로 사용할 수 있는 스크립트 함수는?
메인페이지에서는 <a onclick="iwindow_CLOSE()">닫기</a>
iwindow 창 내부에서는 <a onclick="parent.iwindow_CLOSE()">닫기</a>
메시지(쪽지) 알림이 삽입
새 쪽지 도착 즉시 이를 알리는 '알림이' 가 자동 출력되게 하려면
유틸 파일중 util_iframe_msgcheck.php 를 활용하면 된다.
쪽지 도착 즉시 벨소리와 함께 화면 우측하단에 '알림이' 박스가 솟아 오른다.
1, util_iframe_msgcheck.php 소스를 편집기로 열고 설정항목을 지정한다.
2, '알림이' 레이어가 출력되고자 하는 웹페이지의 html 소스에
<iframe src="./util_iframe_msgcheck.php" style="display:none;"></iframe>
위와 같이 태그를 넣으면 넣는다.
위 태그에서 src=".."' 에는 util_iframe_msgcheck.php 파일에 대한 정확한 주소를 넣어 줘야 한다.
ㆍ홈페이지 메인화면이나 게시판 스킨이나 ... 기타 어떠한 페이지(html, php, asp, cgi ...)에 넣어도 상관 없다.
ㆍ한 페이지내에 중복 삽입되면 안된다.
ㆍ테크노트와 전혀 회원로그인 연동되지 않은 일반 html 페이지에도 위 태그를 넣으면 적용 된다.
ㆍ'알림이' 박스모양(위 그림)을 바꾸려면 ./img/member/balloon.gif 파일을 수정하면 된다.
기본 내장된 javascript 유틸 함수 활용
보드출력시 적용되는 자바스립트 함수는 ./skin_board/스킨명/b_script/main_script.js 에 들어 있다. 이 파일에
새로운 스크립트 함수를 추가하거나 필요하다면 기존 함수를 재 작성해도 된다.
아래 설명된 내용은 기본으로 들어 있는 자바스크립트 함수중 간단히 활용할 수 있는 함수 몇 가지를 소개한 것으로서
보드 스킨 파일에서 직접 사용할 수 있다. MS익스플러, Netscape 부라우저 모두 동일하게 동작한다.
imgSize_OPEN() : 이미지 사이즈에 맞는 윈도우 팝업창 출력한다.
<a href="javascript:void(0)" onclick="imgSize_OPEN('/myhome/myimg/wxy.gif')">그림보기</a>
위 링크형식은myhome/myimg/wxy.gif 이미지를 가로 세로 크기를 맞춘 팝업창으로 출력한다.
<img src='/myhome/myimg/wxy.gif' onclick="imgSize_OPEN(this.src)">
위 형식은 이미지를 클릭했을때 클릭한 이미지를 가로 세로 크기를 맞춘 팝업창으로 출력한다.
위와 동일한 기능을 윈도우 팝업창이 아닌 iwindow 레이어로 구현하려면 아래와 같이 하면 된다.
<img src='/myhome/myimg/wxy.gif' onclick="iwindow_OPEN(this.src,'','','titlebar=y,function=iview_setimg')">
balloon_on() : 말풍선 도움말을 출력한다.
<a href="link url" onmouseover="balloon_on('안녕하세요.',this,0,0)" onmouseout=balloon_off()>링크 Text</a>
위 링크형식은 링크된 영역에 마우스를 올렸을때 안녕하세요. 문장을 풍선 도움말 형태로 출력한다.
기본적으로 링크영영 바로 위에 풍선말이 나타는데 출력 위치를 임의 지정하려면 인수에 포함된 숫자(0,0) 으로 조절하면 된다.
인수: balloon_on(출력내용,this,가로위치,세로위치)
<img src='/img/abcd.gif' onmouseover="balloon_on('안녕하세요.',this,0,0)" onmouseout=balloon_off()> 처럼 이미지에 적용해도 된다.
square_on() : 팝업메뉴 레이어를 출력한다.
<a href="link url" onmouseover="square_on('안녕하세요.<br>감사합니다.<br>고맙습니다.',this,150,-10,'width:200; height:100;')" onmouseout=square_off()>링크 Text</a>
위 링크형식은 링크된 영역에 마우스를 올렸을때 안녕하세요.<br>감사합니다.<br>고맙습니다. 문장을 팝업 레이어로 출력한다.
긴 문장이나 팝업 형식의 확장메뉴를 작성할때 사용한다.
인수: square_on(출력내용,this,가로위치,세로위치,style옵션)
가로위치,세로위치는 onmouseover 이벤트 발생 지점과의 거리이다.
<img src='/img/abcd.gif' onmouseover="square_on('출력내용',this,100,-10,'width:300; height:100;')" onmouseout=square_off()> 처럼 이미지에 적용해도 된다.
publicLayerDisplay() : 레이어 직접 작성하기
<img src='menu1.gif' onMouseover="publicLayerDisplay(event,'xxID',0,0,10,50)" onMouseout="publicLayerDisplay('close','xxID')">
<div id='xxID' style='width:350x; position:absolute; visibility:hidden; z-Index:10;'>
레이어 내의 출력내용
</div>
위 태그는 'menu1.gif' 이미지에 마우스ON 했을때 'xxID' 레이어가 나타나고 마우스OUT 했을때 'xxID' 레이어가 사라지게 한다.
publicLayerDisplay(event,'레이어ID',절대위치Left,절대위치Top,상대위치Left,상대위치Top)
ㆍevent : 레이어를 open 할 때는 event 라고 지정(따옴표 없이)하고, off 할 때는 'close' 라고 지정(따옴표 붙임)한다.
ㆍ레이어ID : 레이어 ID 를 지정한다.
ㆍ절대위치Left : 출력위치를 절대값으로 지정시 X좌표값을 지정한다. 마우스클릭한 위치에 출력되게 하려면 0을 대입한다.
ㆍ절대위치Top : 출력위치를 절대값으로 지정시 Y좌표값을 지정한다. 마우스클릭한 위치에 출력되게 하려면 0을 대입한다.
ㆍ상대위치Left : 마우스를 클릭한 위치로 부터 우측으로 얼마만큼의 간격을 두고 출력할 것인가를 지정 지정한다.
ㆍ상대위치Top : 마우스를 클릭한 위치로 부터 상단측으로 얼마만큼의 간격을 두고 출력할 것인가를 지정 지정한다.
set_SESSION(key,value) : 세션 변수를 생성한다.
<a href="javascript:void(0)" onclick="set_SESSION('myname','kiminho')">세선생성</a>
위 링크형식은 $_SESSION['TnTTmyname'] 세션변수를 생성하고 'kiminho' 을 저장한다.
위 예에서 보듯 이 함수에 의해 생성되는 세선key 는 무조건 앞에 'TnTT' 가 붙는다.(로그인 세션 거짓생성및 중복 방지)
보안에 관련된 용도로는 사용할 수 없다.
xwindow_OPEN() : 용도확장형 팝업창을 출력한다.
<a href="javascript:void(0)" onclick="xwindow_OPEN('test_win',300,500,100,120,325,'name1=value1',1,1,'xxyy',0)">용도확장 팝업창</a>
위 링크형식은 ./skin_board/스킨명/exp_window/test_win.php 파일을 팝업창으로 출력한다.
만약 다른 페이지를 출력하고자 한다면 test_win 대신 출력페이지의 url 을 넣어 주면 된다.
괄호안의 인수들은 다음과 같은 속성을 갖는다.
xwindow_OPEN('include파일 or URL','가로크기','세로크기','출력위치X','출력위치Y','글고유번호','GET인수','스크롤바','리사이즈','타겟','도구')
ㆍ include파일명 혹은 URL : ./skin_board/스킨명/exp_window/ 폴더내에 test_win2.php 파일을 작성해 넣었다면
test_win2.php 에서 확장자(.php) 를 제외한 'test_win2' 을 지정하면 된다(파일명은 영문,숫자,밑줄 만 허용됨). 이것은 해당 파일을
URL로 단순 연결시키는게 아니라 보드출력 메인 파일인 board.php 를 통해 include 시키는 것이다. 따라서 보드 관련된
모든 DATA(보드설정,세션,쿠키,DB,변수..등)를 test_win2.php 파일 내에서도 바로 사용할 수 있게 된다.
만약 일반 페이지를 팝업창으로 출력시키려면 파일명 대신 출력코자 하는 페이지의 URL 주소를 넣어 주면 된다.
ㆍ 가로크기,세로크기 : 팝업창의 크기를 지정한다.
ㆍ 출력위치X,Y : 팝업창 출력 절대위치를 지정한다. 0 으로 지정한 경우 정 중앙에 출력된다.
ㆍ 글번호 : 글목록, 본문출력 스킨파일 내에 이 팝업창 링크를 넣고 글의 고유번호를 출력파일에 자동 전달코자 할 때 사용한다.
ㆍ GET 인수 : 출력될 파일에 어떤 값을 전달하고자 할 때 사용한다. name1=value1&name2=value2&name3=.... 식으로 넣으면 된다.
ㆍ 스크롤바 : '1' 을 대입하면 스크롤바로 있는 팝업창을, '0' 을 대입하면 스크롤바 없는 팝업창을 출력한다.
ㆍ 리사이즈 : '1'을 대입하면 크기 변경이 가능한 팝업창을, '0'을 대입하면 크키변경 불가능한 팝업창을 출력한다
ㆍ 타겟 : 팝업창에 타겟명을 지정한다.
ㆍ 도구 : '1'을 대입하면 웹부라우저의 기본도구가 들어간 팝업창을, '0'을 대입하면 기본도구 없는 팝업창을 출력한다.
iwindow_OPEN() : 응용 레이어 iwindow 를 출력한다.(위 단원에 설명되어 있음)
dialog_OPEN() : 대화상자형 ModalDialog 팝업창을 출력한다.
<a href="javascript:void(0)" onclick="dialog_OPEN('test_dialog',300,500,100,120,325,'name1=value1',1,1)">대화상자 팝업창</a>
위 링크형식은 ./skin_board/스킨명/exp_dialog/test_dialog.php 파일을 ModalDialog 팝업창으로 출력한다.
만약 다른 페이지를 출력하고자 한다면 test_dialog 대신 출력페이지의 url 을 넣어 주면 된다.
괄호안의 인수들은 다음과 같은 속성을 갖는다.
dialog_OPEN('include파일 or URL','가로크기','세로크기','출력위치X','출력위치Y','글고유번호','GET인수','스크롤바','리사이즈')
ㆍ include파일명 혹은 URL : ./skin_board/스킨명/exp_dialog/ 폴더내에 test_dialog2.php 파일을 작성해 넣었다면
test_dialog2.php 에서 확장자(.php) 를 제외한 'test_dialog2' 을 지정하면 된다(파일명은 영문,숫자,밑줄 만 허용됨). 이것은 해당 파일을
URL로 단순 연결시키는게 아니라 보드출력 메인 파일인 board.php 를 통해 include 시키는 것이다. 따라서 보드 관련된
모든 DATA(보드설정,세션,쿠키,DB,변수..등)를 test_dialog2.php 파일 내에서도 바로 사용할 수 있게 된다.
만약 일반 페이지를 ModalDialog 팝업창으로 출력시키려면 파일명 대신 출력코자 하는 페이지의 URL 주소를 넣어 주면 된다.
ㆍ 가로크기,세로크기 : ModalDialog 창의 크기를 지정한다.
ㆍ 출력위치X,Y : ModalDialog 창 출력 절대위치를 지정한다. 0 으로 지정한 경우 정 중앙에 출력된다.
ㆍ 글번호 : 글목록, 본문출력 스킨파일 내에 ModalDialog 창 링크를 넣고 글의 고유번호를 출력파일에 자동 전달코자 할 때 사용한다.
ㆍ GET 인수 : 출력될 파일에 어떤 값을 전달하고자 할 때 사용한다. name1=value1&name2=value2&name3=.... 식으로 넣으면 된다.
ㆍ 스크롤바 : '1' 을 대입하면 스크롤바로 있는, '0' 을 대입하면 스크롤바 없는 ModalDialog 창을 출력한다.
ㆍ 리사이즈 : '1'을 대입하면 크기 변경이 가능한, '0'을 대입하면 크키변경 불가능한 ModalDialog 창을 출력한다
TnT_setcookie() : 쿠키값을 등록한다.
TnT_setcookie('myname','홍길동',10) : 'myname' 쿠키명으로 '홍길동' 이 저장되고 10 시간동안 유지된다.
TnT_getcookie() : 쿠키값을 읽는다.
isname=TnT_getcookie('myname') : 'myname' 쿠키명으로 저장된 값(홍길동)을 isname 에 대입한다.
innerhtml_ON() : Ajax(에이젝스) XMLHttpRequest 방식 innerHTML : 용도는 광범위하지만 주로 쓰이는 곳은
현재 출력된 상태의 전체페이지 내에서 부분적인 영역(<div id=abcde>~</div>) 만 업데이트 시킬때 많이 사용한다. 스크립트 함수는
innerhtml_ON('액션파일','오브젝트ID','get 쿼리','옵션') 으로 구성된다. '액션파일' 외의 요소들은 모두 생략할 수 있다.
ㆍ액션파일 : ....skin_board/스킨명/innerhtml/ 폴더내에 있는 실행 '파일명'을 지정한다. 예를 들어 'ajax_test' 라고 지정 했다면
'....skin_board/스킨명/innerhtml/ajax_test.php' 파일이 실행된다. 필요한대로 새 파일을 작성해서 넣고 이와 같이 파일명을 지정해서 연결하면 된다.
또는, 특정 url 로 연결하려면 url 주소 전체를 직접 지정하면 된다.
ㆍ오브젝트ID : '액션파일' 로 부터 넘겨 받은(return 된) 내용(html태그)을 삽입할 영역의 ID 를 지정한다(<div id=abcde>...). 지정하지 않거나 없는 ID 를 지정하면 새로 생성된다.
ㆍget 쿼리 : '액션파일'에 연결될때 어떤 값을 실어 보내려면 'var1=abcde&var2=efgh&...' 식으로 값을 실어 주면 된다.
ㆍ옵션 : 'width=200,height=100,left=150,top=50,move_left=20,move_top=40,css_style=background-color:#ffffff; border:1px solid #ff3355;'
위와 같이 7 가지 옵션을 지정할수 있으며 어떤 것이든 생략할 수 있다.
ㆍwidth - 가로크기
ㆍheight - 세로크기
ㆍleft - 위치: 화면좌측 으로부터의 거리
ㆍtop - 위치: 화면상단 으로부터의 거리
ㆍmove_left - 위치: 마우스 클릭한 위치로부터의 좌우 거리(좌:- , 우:+)
ㆍmove_top - 위치: 마우스 클릭한 위치로부터의 상하 거리(상:- , 하:+)
ㆍcss_style - css style 요소지정
innerhtml_OFF('오브젝트ID') 는 '오브젝트ID' 의 innerHTML 을 삭제 시킨다..
웹폰트 적용
보드에 웹폰트를 적용 하려면 스킨파일 1_main_html.php 소스에 다음과 같은 식으로 서체지정 CSS 코드를 넣으면 된다.
<style type='text/css'>
@font-face { font-family:웹정체; src:url('http://abcdef.com/font/webjungfont.mwf');}
body,td,input,textarea,select{ font-size:9pt; font-family:웹정체,굴림,Tahoma; }
</style>
유틸리티 파일 활용 설명 보기
이 파일들은 완성파일이 아닌 응용파일이므로 소스내의 설명 부분을 직접 살펴 보아야 활용이 가능하다.
반드시 사용되어야 하는 파일이 아니므로 사용자가 판단하여 필요한 경우에만 사용하면 된다.
util_iboard.php 설명 보기
보드에 등록된 자료(게시물)을 뽑아내서 필요한 곳에 필요한 자료만 출력시키는것이 이 파일의 주요 기능이다.
메인 홈페이지에 최신글 목록이나 공지사항 보여 주기, 여러 보드의 글목록을 1화면에 몰아 출력하기 등의 용도로 활용할 수 있다.
이 파일로 메인홈페이지 자체를 작성하는 것도 유용하다.
util_iboard_include.php
테크노트에서 속해 있는 특정 보드의 최신글 목록을,
테크노트에 속해 있지 않은 외부 php 파일에서 include 로 부분삽입 하고자 할때 유용한 파일이다.
util_iframe_calendar.php
<iframe src=...> 형식으로 출력 삽입.
캘린더를 출력하고 날자별로 특정 보드의 글에 연결시킨다.
일정관리, 다이어리, 메모장 등의 용도로 활용할 수 있다.
util_iframe_loginform.php
<iframe src=...> 형식으로 출력 삽입.
회원 로그인폼을 아무 페이지에나 쉽게 넣을 수 있다.
util_iframe_msgcheck.php
<iframe src=...> 형식으로 출력 삽입.
메시지(쪽지) 도착을 실시간으로 통보(알림이 출력) 한다.
util_iframe_onlinelist.php
<iframe src=...> 형식으로 출력 삽입.
회원로그인폼 및 현재 접속자 리스트를 아무 페이지에나 쉽게 넣을 수 있다.
util_include_loginform.php
스킨소스 내에서 직접 include "util_include_loginform.php"; 형식으로 출력 삽입.
회원로그인폼 및 현재 접속자 리스트를 쉽게 넣을 수 있다.
util_include_rank_b.php
특정보드(게시판)에서 특정값(글등록수,댓글등록수,포인트,조회수....등)을 기준으로 순위를 추출해 낸다.
스킨내에서는 물론이고 외부 페이지의 일부 영역에 회원랭크 순위를 삽입하는 등의 용도로 유용하다.
util_include_rank_m.php
회원등록 리스트에서 특정값(포인트, 레벨, 로그인횟수 ....등)을 기준으로 순위를 추출해 낸다.
스킨내에서는 물론이고 외부 페이지의 일부 영역에 회원랭크 순위를 삽입하는 등의 용도로 유용하다.
util_login_input.php
인증공유 코드 활용.
테크노트 아닌 다른 프로그램의 회원 인증상태를 테크노트에 공유 시키고자 할 때 사용하면 된다.
util_login_output.php
인증공유 코드 활용.
테크노트내의 회원 인증상태를 테크노트 외의 다른 php 파일에 공유 시키고자 할 때 사용하면 된다.
util_recommend_id.php
회원등록 추천 활용 파일.
어떤 추천 경로를 통해 들어온 방문자인지를 인식하여 회원등록시
추천자의 아이디를 기록하며, 회원등록관리 설정여부에 따라서 해당 추천자에게 포인트를 적립시킬 수 있다.
util_rss.php
XML-RSS 활용 파일.
RSS 리더기로 전송할 xml 문서를 생성한다. [보드설정]-[4-16] 에서 적용한다.
사이트를 직접방문하지 않고도 보드의 최근 등록글을 받아 볼수 있게 한다.
copyrightⓒ : TECHNOTE INC , www.technote.co.kr