웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
각 리스트형 위젯에 페이지 기능을 달자.
2008.09.02 14:32
몇몇분이 소스를 공개하라고 해서 페이지 기능을 구현하는 방법을 소개해볼까 합니다.
이번 소스모델이 된 위젯은 newest_image(최근 이미지 위젯) 입니다.
최근 이미지 위젯에 페이지 기능을 위한 추가, 수정 파일
(※ 이미 설명드린 부분(하단참조) 있기 때문에 아래부터는 존칭을 생략 하겠습니다.)
- info.xml -
한 페이지 당 출력할 페이지 번호 갯수와, 페이지 출력 여부 설정 값을 입력 받기 위해
page_count, page_type 항목을 선언
- newest_images.class.php -
newest_images.class.php 파일안에 구석구석 위의 변수가 들어가면 페이지 기능이 완성 된다.
1. 첫번째 페이지 기능을 위한 정보 입력 및 처리
XML로 만들었던 page_count와 page_type을 DB로 보내기 위해 위와 같이 선언 한다.
(※ 다른 위젯과 다르게 $list_count 변수가 없어서 마지막에 $list_count = $obj->list_count;을 추가 선언해준다.)
2. DB로 보낼때 페이지 기능에서 필요로 하는 값중에는 전체 게시물수가 필요함.
전체 게시물 수를 구할 수 있도록 아래와 같이 선언
기 존 $files_output = executeQueryArray("file.getOneFileInDocument", $obj); 를 수정하게 되면 중심 모듈을 건드리게 되기 때문에 아래와 같이 위젯 폴더안에 queries라는 폴더를 하나더 만들어서 새로이 생성해준다.
전체 게시물 수를 구하도록 끝에 Count를 더 달아서 파일을 생성해준다.
3. 결과값의 순서를 수정
다른 위젯과 다르게 임의의 page( limit 0, 5 ) 가 선언되면
$files_output->data[0] ..[1]..[2]..... 가 아니라 $files_output->data[343]... [344]...[345].....
순으로 저장 되기에 이를 0번 부터 사용하도록 수를 수정 한다.
4. 페이지 계산에 필요한 정보를 list.html로 보내기 위해 아래와 같이 정리 한다.
5. list.html에서 호출에 오는 함수 정보.
위와 함수를 이용하여 페이지 계산, 초기화 등의 정보를 구한다.
- getOneFileInDocument.xml -
기존의 기본 XML에서 아래의 내용을 추가한다. (페이지 별로 내용 축출을 위해 필요)
<page_count var="page_count" default="10" />
<page var="page" default="1" />
- getOneFileInDocumentCount.xml -
내용은 그대로 getOneFileInDocument.xml에서 가져오돼 바꿔줘야 할 부분
- list.html -
중요한 선언만 설명
$widget_info로 넘겨받은 페이지 계산을 위한 전체 게시물 수, 전체 페이지 수, 현재 페이지 번호, 한페이지에 출력될 페이지 번호의 수를 WD_getNextPage로 호출하여 $page_view에 결과를 저장한다.
상 하로 중복 선언이 될 경우 기존에 이용되었던 $GLOBALS 변수를 초기화 시킨다.
WD_getNextPage2() 를 호출시마다 반복시켜서 내용이 없을때까지 수행한다.
이번 소스모델이 된 위젯은 newest_image(최근 이미지 위젯) 입니다.
최근 이미지 위젯에 페이지 기능을 위한 추가, 수정 파일
./widgets/newest_image/conf/info.xml <- 입력을 받기 위한 입력창
: 관리자페이지에서 코드 실행하기전에 이곳으로부터 정보를 입력 받습니다.
./widgets/newest_image/newest_images.class.php <- 입력 받은 정보를 처리
: 입력 받은 정보를 적절히 정리해서 DB로 부터 결과값들을 받고 스킨 처리를 하는 파일
./widgets/newest_image/queries/getOneFileInDocument.xml<- DB Query용 XML 파일
: $page 번호 값에 따라서 결과를 출럭하기 위해 <navigation>에 내용을 추가 해야 합니다.
: 또한 기존 files 모듈에 있던 내용을 위젯에 생성이 필요합니다.
./widgets/newest_image/queries/getOneFileInDocumentCount.xml <- DB Query용 XML 파일
: 결과값용 Query와 다르게 페이지 기능을 만들기 위해 하나의 Query를 더 해야합니다.
./widgets/newest_image/skin/default/list.html <- DB로 부터의 결과를 이용하여 표현하는 스킨 파일
: 관리자페이지에서 코드 실행하기전에 이곳으로부터 정보를 입력 받습니다.
./widgets/newest_image/newest_images.class.php <- 입력 받은 정보를 처리
: 입력 받은 정보를 적절히 정리해서 DB로 부터 결과값들을 받고 스킨 처리를 하는 파일
./widgets/newest_image/queries/getOneFileInDocument.xml<- DB Query용 XML 파일
: $page 번호 값에 따라서 결과를 출럭하기 위해 <navigation>에 내용을 추가 해야 합니다.
: 또한 기존 files 모듈에 있던 내용을 위젯에 생성이 필요합니다.
./widgets/newest_image/queries/getOneFileInDocumentCount.xml <- DB Query용 XML 파일
: 결과값용 Query와 다르게 페이지 기능을 만들기 위해 하나의 Query를 더 해야합니다.
./widgets/newest_image/skin/default/list.html <- DB로 부터의 결과를 이용하여 표현하는 스킨 파일
(※ 이미 설명드린 부분(하단참조) 있기 때문에 아래부터는 존칭을 생략 하겠습니다.)
- info.xml -
........ XML 선언 문들...... <options> <name xml:lang="ko">표시하지 않음</name> <name xml:lang="jp">非表示</name> <name xml:lang="zh-CN">不显示</name> <name xml:lang="en">Hide</name> <name xml:lang="es">Ocultar</name> <name xml:lang="ru">Скрывать</name> <value>N</value> </options> </var> <var id="page_count"> <name xml:lang="ko">페이지 목록수</name> <type>text</type> <description xml:lang="ko">출력될 페이지의 수를 정하실 수 있습니다. (기본 5개)</description> </var> <var id="page_type"> <name xml:lang="ko">페이지 출력 여부</name> <type>select</type> <description xml:lang="ko">페이지를 출력할지 선택하세요.</description> <options> <name xml:lang="ko">N</name> <value></value> </options> <options> <name xml:lang="ko">Y</name> <value>Y</value> </options> </var> </extra_vars> </widget>
한 페이지 당 출력할 페이지 번호 갯수와, 페이지 출력 여부 설정 값을 입력 받기 위해
page_count, page_type 항목을 선언
- newest_images.class.php -
/* 페이지 네비게이션 기능 추가 */ // 페이지 목록 수 (1,2,3,4....) $page_count = $args->page_count; if(!$page_count) $page_count = 5; $obj->page_count = $page_count; // 페이지 출력 여부 $page_type = $args->page_type; // 페이지 번호 구하기 if($page_type=='Y') $obj->page = (Context::get('+ '+ 'page'))? Context::get('page'): 1; // 기존 변수 추가로 저장 $list_count = $obj->list_count; /* 페이지 네비게이션 기능 추가 끝 */ // 정해진 모듈에서 문서별 파일 목록을 구함 $files_output = executeQueryArray("widgets.newest_images.getOneFileInDocument", $obj); $output_count = executeQueryArray('widgets.newest_images.getOneFileInDocumentCount', $obj); ...중략... $z=0; foreach($files_output->data as $key => $val) { $files_output->data[$z] = $files_output->data[$key]; unset($files_output->data[$key]); $z++; } ...중략... /* 페이지 네비게이션 기능 추가 */ $widget_info->page_type = $page_type; $widget_info->total_count = $output_count->data[0]->count; // 전체 개시물 수 $widget_info->page = (!Context::get('page'))? 1:Context::get('page'); // 현재 페이지 // 총 페이지 수 $total_count = $widget_info->total_count/$list_count; if($widget_info->total_count%$list_count != 0) $total_count+=1; $widget_info->total_page = floor($total_count); // 총 페이지 수 $widget_info->page_count = $page_count; // 총 페이지 수 /* 페이지 네비게이션 기능 추가 끝 */ ...중략... /** * @brief 다음 페이지 요청 **/ function WD_getNextPage($total_count, $total_page, $cur_page, $page_count = 10) { $first_page = $cur_page - (int)($page_count/2); if($first_page<1) $first_page = 1; $last_page = $total_page; if($last_page>$total_page) $last_page = $total_page; if($total_page < $page_count) $page_count = $total_page; $GLOBALS['wd_total_page'] = $total_page; $GLOBALS['wd_first_page'] = $first_page; $GLOBALS['wd_page_count'] = $page_count; $GLOBALS['wd_last_page'] = $last_page; $page->first_page = $first_page; $page->last_page = $last_page; return $page; } function WD_getNextPage2() { $page = $GLOBALS['wd_first_page']+$GLOBALS['wd_i'+ ']++; if($GLOBALS['wd_i'] > $GLOBALS['wd_page_count'] || $page > $GLOBALS['wd_last_page']) $page = 0; return $page; } function WD_getNextClear() { $GLOBALS['wd_i'] = 0; }
newest_images.class.php 파일안에 구석구석 위의 변수가 들어가면 페이지 기능이 완성 된다.
1. 첫번째 페이지 기능을 위한 정보 입력 및 처리
/* 페이지 네비게이션 기능 추가 */ // 페이지 목록 수 (1,2,3,4....) $page_count = $args->page_count; if(!$page_count) $page_count = 5; $obj->page_count = $page_count; // 페이지 출력 여부 $page_type = $args->page_type; // 페이지 번호 구하기 if($page_type=='Y') $obj->page = (Context::get('page'))? Context::get('page'): 1; // 기존 변수 추가로 저장 $list_count = $obj->list_count; /* 페이지 네비게이션 기능 추가 끝 */
XML로 만들었던 page_count와 page_type을 DB로 보내기 위해 위와 같이 선언 한다.
(※ 다른 위젯과 다르게 $list_count 변수가 없어서 마지막에 $list_count = $obj->list_count;을 추가 선언해준다.)
2. DB로 보낼때 페이지 기능에서 필요로 하는 값중에는 전체 게시물수가 필요함.
전체 게시물 수를 구할 수 있도록 아래와 같이 선언
// 정해진 모듈에서 문서별 파일 목록을 구함 $files_output = executeQueryArray("widgets.newest_images.getOneFileInDocument", $obj); $output_count = executeQueryArray('widgets.newest_images.getOneFileInDocumentCount', $obj);
기 존 $files_output = executeQueryArray("file.getOneFileInDocument", $obj); 를 수정하게 되면 중심 모듈을 건드리게 되기 때문에 아래와 같이 위젯 폴더안에 queries라는 폴더를 하나더 만들어서 새로이 생성해준다.
전체 게시물 수를 구하도록 끝에 Count를 더 달아서 파일을 생성해준다.
3. 결과값의 순서를 수정
$z=0; foreach($files_output->data as $key => $val) { $files_output->data[$z] = $files_output->data[$key]; unset($files_output->data[$key]); $z++; }
다른 위젯과 다르게 임의의 page( limit 0, 5 ) 가 선언되면
$files_output->data[0] ..[1]..[2]..... 가 아니라 $files_output->data[343]... [344]...[345].....
순으로 저장 되기에 이를 0번 부터 사용하도록 수를 수정 한다.
4. 페이지 계산에 필요한 정보를 list.html로 보내기 위해 아래와 같이 정리 한다.
/* 페이지 네비게이션 기능 추가 */ $widget_info->page_type = $page_type; $widget_info->total_count = $output_count->data[0]->count; // 전체 개시물 수 $widget_info->page = (!Context::get('page'))? 1:Context::get('page'); // 현재 페이지 // 총 페이지 수 $total_count = $widget_info->total_count/$list_count; if($widget_info->total_count%$list_count != 0) $total_count+=1; $widget_info->total_page = floor($total_count); // 총 페이지 수 $widget_info->page_count = $page_count; // 총 페이지 수 /* 페이지 네비게이션 기능 추가 끝 */ Context::set('widget_info', $widget_info); ...중략...
5. list.html에서 호출에 오는 함수 정보.
/** * @brief 다음 페이지 요청 **/ function WD_getNextPage($total_count, $total_page, $cur_page, $page_count = 10) { $first_page = $cur_page - (int)($page_count/2); if($first_page<1) $first_page = 1; $last_page = $total_page; if($last_page>$total_page) $last_page = $total_page; if($total_page < $page_count) $page_count = $total_page; $GLOBALS['wd_total_page'] = $total_page; $GLOBALS['wd_first_page'] = $first_page; $GLOBALS['+ 'wd_page_count'] = $page_count; $GLOBALS['wd_last_page'] = $last_page; $page->first_page = $first_page; $page->last_page = $last_page; return $page; } function WD_getNextPage2() { $page = $GLOBALS['+ 'wd_first_page'+ ']+$GLOBALS['wd_i']++; if($GLOBALS['wd_i'] > $GLOBALS['wd_page_count'] || $page > $GLOBALS['wd_last_page'+ ']) $page = 0; return $page; } function WD_getNextClear() { $GLOBALS['wd_i'] = 0; }
위와 함수를 이용하여 페이지 계산, 초기화 등의 정보를 구한다.
- getOneFileInDocument.xml -
<query id="getOneFileInDocument" action="select"> <tables> <table name="files" alias="files"/> <table name="documents" alias="documents"/> </tables> <columns> <column name="files.upload_target_srl" alias="document_srl"/> </columns> <conditions> <condition operation="in" column="files.module_srl" var="module_srls" notnull="notnull" filter="numbers" /> <condition operation="equal" column="files.direct_download" var="direct_download" pipe="and" /> <condition operation="equal" column="files.isvalid" var="isvalid" pipe="and" /> <condition operation="equal" column="files.upload_target_srl" var="documents.document_srl" pipe="and" /> </conditions> <groups> <group column="files.upload_target_srl" /> </groups> <navigation> <index var="list_order" default="documents.list_order" order="asc" /> <list_count var="list_count" default="20" /> <page_count var="page_count" default="10" /> <page var="page" default="1" /> </navigation> </query>
기존의 기본 XML에서 아래의 내용을 추가한다. (페이지 별로 내용 축출을 위해 필요)
<page_count var="page_count" default="10" />
<page var="page" default="1" />
- getOneFileInDocumentCount.xml -
<query id="getOneFileInDocumentCount" action="select"> <tables> <table name="files" alias="files"/> <table name="documents" alias="documents"/> </tables> <columns> <column name="count(files.upload_target_srl)" alias="count"/> </columns> <conditions> <condition operation="in" column="files.module_srl" var="module_srls" notnull="notnull" filter="numbers" /> <condition operation="equal" column="files.direct_download" var="direct_download" pipe="and" /> <condition operation="equal" column="files.isvalid" var="isvalid" pipe="and" /> <condition operation="equal" column="files.upload_target_srl" var="documents.document_srl" pipe="and" /> </conditions> <groups> <group column="files.upload_target_srl" /> </groups> <navigation> <index var="list_order" default="documents.list_order" order="asc" /> </navigation> </query>
내용은 그대로 getOneFileInDocument.xml에서 가져오돼 바꿔줘야 할 부분
<query id="getOneFileInDocumentCount" action="select">id명을 파일명과 일치시킨다.
<column name="count(files.upload_target_srl)" alias="count"/>count()로 감싸고 alias="count" 라는 이름으로 명시.
<list_count var="list_count" default="20" />해당 내용 삭제하여 전체 게시물로써의 게시물수를 구한다.
- list.html -
<!--@if($widget_info->page_type=='Y')--> <!-- 페이지 네비게이션 --> <div class="pageNavigation"> <a href="{getUrl('page','','document_srl','','division',$division,'last_division',$last_division)}" class="goToFirst"> <img src="./images/common/bottomGotoFirst.gif" alt="{$lang->first_page}" width="7" height="5" /></a> <!-- 페이지 정보 구하기 위해 선언 --> {@$page_view = WD_getNextPage($widget_info->total_count,$widget_info->total_page,$widget_info->page,$widget_info->page_count)} <!-- 중복 페이지 정보 출력을 위해 사전 초기화 --> {@WD_getNextClear()} <!--@while($page_no = WD_getNextPage2())--> <!--@if($widget_info->page == $page_no)--> <span class="current">{$page_no}</span> <!--@else--> <span class="pageNavigations"><a href="{getUrl('page',$page_no,'+ 'document_srl','','division',$division,'last_division',$last_division)}" class="pageNavigation2">{$page_no}</a></span> <!--@end--> <!--@end--> <a href="{getUrl('page',$page_view->last_page,'document_srl','','division',$division,'last_division',$last_division)}" class="goToLast"> <img src="./images/common/bottomGotoLast.gif" alt="{$lang->last_page}" width="7" height="5" /></a> </div> <!--@end-->
중요한 선언만 설명
{@$page_view = WD_getNextPage($widget_info->total_count,$widget_info->total_page,$widget_info->page,$widget_info->page_count)}
$widget_info로 넘겨받은 페이지 계산을 위한 전체 게시물 수, 전체 페이지 수, 현재 페이지 번호, 한페이지에 출력될 페이지 번호의 수를 WD_getNextPage로 호출하여 $page_view에 결과를 저장한다.
{@WD_getNextClear()}
상 하로 중복 선언이 될 경우 기존에 이용되었던 $GLOBALS 변수를 초기화 시킨다.
<!--@while($page_no = WD_getNextPage2())--> ...내용... <!--@end-->
WD_getNextPage2() 를 호출시마다 반복시켜서 내용이 없을때까지 수행한다.
위 설명은 왠만한 위젯에서 공통적으로 적용가능합니다. (리스트형)
1~5번의 위치만 제대로 잡아주시고 DB용 xml만 제대로 선언해주신다면 페이지 네비게이션 이용에
문제가 없을 걸로 봅니다.
전체 소스결과를 출력하긴 좀 그래서 newest_images 위젯을 배포하겠습니다.
위 소스를 기반으로 확인해보시고 다른곳에 적용해보시고 하세요.
1~5번의 위치만 제대로 잡아주시고 DB용 xml만 제대로 선언해주신다면 페이지 네비게이션 이용에
문제가 없을 걸로 봅니다.
전체 소스결과를 출력하긴 좀 그래서 newest_images 위젯을 배포하겠습니다.
위 소스를 기반으로 확인해보시고 다른곳에 적용해보시고 하세요.
보다 자세한 원리의 강좌는 제 홈페이지에 설명되어있습니다.
http://www.animeclub.net/zbXE
http://www.animeclub.net/zbXE
태그 연관 글
- [2015/08/01] 포럼 [XE기초강좌 동영상] 휴면계정 정리 모듈 사용방법 *5
- [2015/07/20] 포럼 [아프리카TV 생방송] 충쌤의 XE랑(월,화 밤11시) * 진화쌤의 반응형 레이아웃 제작(수,목 밤10시) *29
- [2014/05/29] 포럼 XE 오픈 세미나 - 5월 31일 xdebug, XE 개발 전반에 대한 Q&A *4
- [2014/05/26] Blog 5월 XE 오픈 세미나 - [3회차] XE 모듈 개발 걸음마부터 날기까지 *1
- [2014/05/19] Blog XE 오픈 세미나 - XE 모듈 개발 1회차 리뷰
댓글 10
제목 | 글쓴이 | 날짜 |
---|---|---|
lang.xml 키워드 사용체크 프로그램 (리눅스/파이썬)
![]() | NURIGO | 2014.03.19 |
모바일 화면 사이즈 관련 팁 | 젤리빈 | 2014.03.19 |
폰갭 이용시 파일 첨부 한번에 올리기 | 웹빌드 | 2014.03.20 |
[Jquery] input box border input | pell | 2014.03.21 |
XE코어 수정없이 원하는 기능 넣기
[3]
![]() | 마이웹 | 2014.03.22 |
사용자에게 파일 내용을 뿌릴땐 fpassthru를 쓰자 [2] | DynamicLaser | 2014.03.23 |
로그인 안하면 코멘트 볼 수 없게 스킨 수정하는 법 [3] | W.O | 2014.03.23 |
메인 홈페이지와 서브페이지를 하나의 레이아웃으로 | 투씨 | 2014.03.24 |
VB.NET에서 XE로그인 연동하기.[내용추가] [3] | AppSeedKorea | 2014.03.26 |
[SocialXE] 1.7.4.x 업데이트 후 SocialXE에서 '잘못된 요청입니다.' 오류가 뜨는 문제 해결하기
[15]
![]() | TUW | 2014.03.26 |
여러가지 hover effect 모음 [1] | 드래그홈 | 2014.03.26 |
여러가지 프로토타이핑 툴 [1] | 드래그홈 | 2014.03.26 |
모바일EX 사용시, 모바일 레벨아이콘 출력하기. [11] | qwms | 2014.03.29 |
index.php에서 Parse Error가 발생한다면 [6] | YJSoft | 2014.04.01 |
[javascript]기초강좌 | 01 자바스크립트개념 | hiwebs | 2014.04.01 |
[javascript] 기초강좌 | 02 산술, 대입, 증감, 비교연산자 | hiwebs | 2014.04.01 |
코어 업데이트 후 회원가입 이름이 숫자(번호)로 뜨는 현상 수정 [1] | 자대련 | 2014.04.01 |
slidesj 사용시 자동으로 다음 사진 넘길때 | 웹빌드 | 2014.04.02 |
이전/다음 글버튼 출력 애드온의 버튼을 사이트 밖으로 빼봅시다..^^
[5]
![]() | 착한악마 | 2014.04.03 |
관리자를 제외하고는 타회원의 회원정보 보기를 막는 방법 [1] | sejin7940 | 2014.04.04 |